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左侧多级菜单动态的解决方案
Feb 01 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
angularJS开发注意事项
May 26 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 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编程最快明白》第三讲:php数组
2010/11/01 PHP
php适配器模式介绍
2012/08/14 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
js 通用订单代码
2013/12/23 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
angularJS Provider、factory、service详解及实例代码
2016/09/21 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python 字符串与数字输出方法
2018/07/16 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python实现静态服务器
2019/09/05 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
生日宴会主持词
2014/03/20 职场文书
主题教育活动总结
2014/05/05 职场文书
2015年招聘工作总结
2014/12/12 职场文书
慰问信模板
2015/02/14 职场文书
浅谈python数据类型及其操作
2021/05/25 Python