vue中组件的过渡动画及实现代码


Posted in Javascript onNovember 21, 2018

1.  和多个元素的过渡一样,用组件来替换transition中包裹的标签

<style>
 .fade-enter,
 .fade-leave-to {
  opacity: 0
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 2s
 }
 </style>
</head>

<body>
 <div id="demo">
 <button @click="show = !show">click me</button>
 <transition name="fade" mode="in-out">
  <child-one v-if="show"></child-one>
  <child-two v-else></child-two>
 </transition>
 </div>
 <script>
 Vue.component('child-one', {
  template: `<div>child-one</div>`
 })
 Vue.component('child-two', {
  template: `<div>child-two</div>`
 })
 new Vue({
  el: '#demo',
  data: {
  show: true
  },
 })
 </script>

2.  动态组件:component组件 :is 属性,来实现组件的过渡效果 

<style>
 .fade-enter,
 .fade-leave-to {
  opacity: 0
 }
 .fade-enter-active,
 .fade-leave-active {
  transition: opacity 2s
 }
 </style>
</head>

<body>
 <div id="demo">
 <button @click="handleClick">click me</button>
 <transition name="fade" mode="in-out">
  <component :is="type"></component>
 </transition>
 </div>
 <script>
 Vue.component('child-one', {
  template: `<div>child-one</div>`
 })
 Vue.component('child-two', {
  template: `<div>child-two</div>`
 })
 new Vue({
  el: '#demo',
  data: {
  type: 'child-one'
  },
  methods:{
  handleClick () {
   this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
  }
  }
 })
 </script>

PS:下面看下Vue过渡动画实现

实现一个点击切换元素的隐藏和显示状态!

<div id="app">
  <transition>
    <p v-if="show">Hello World</p>
  </transition>
  <button @click="toggle">切换</button>
</div>

需要把加入动画的元素放在transition组件内,定义一个按钮的切换方法

<script>
  var app=new Vue({
    el:"#app",
    data:{
      show:true
    },
    methods:{
      toggle:function(){
        this.show=!this.show;
      }
    }

  })
</script>

给不同状态下添加相应的样式

.v-enter,.v-leave-to{
  opacity:0;
}
.v-enter-active,.v-leave-to{
  color:#00BFFF;
  transition: opacity 3s;
}

可以给transition添加一个name,如果name为"fade",则class前缀为指定的name

动画过程中类名的变化

vue中组件的过渡动画及实现代码

我们可以自定义类名,在元素属性中添加进入状态 enter-active-class,和离开状态leave-active-class

总结

以上所述是小编给大家介绍的vue中组件的过渡动画及实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
潜说js对象和数组
May 25 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
Webpack3+React16代码分割的实现
Mar 03 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 #Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 #Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 #Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 #Javascript
详解nuxt路由鉴权(express模板)
Nov 21 #Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 #Javascript
Angular刷新当前页面的实现方法
Nov 21 #Javascript
You might like
劣质的PHP代码简化
2010/02/08 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
node 版本切换的实现
2020/02/02 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
Python 中 Meta Classes详解
2016/02/13 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
《观舞记》教学反思
2014/04/16 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
大学生实训报告总结
2014/11/05 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL