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实现浏览器菜单命令
Sep 05 Javascript
javascript显示选择目录对话框的代码
Nov 10 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 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
图解上海144收音机
2021/03/02 无线电
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
字母顺序颠倒而单词顺序不变的php代码
2010/08/08 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
php使用websocket示例详解
2014/03/12 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
php中adodbzip类实例
2014/12/08 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
JavaScript基本对象
2007/01/11 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
深入理解Python对Json的解析
2017/02/14 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Python获取时间戳代码实例
2019/09/24 Python
django中瀑布流写法实例代码
2019/10/14 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
青年教师听课心得体会
2016/01/15 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
MySQL8.0的WITH查询详情
2021/08/30 MySQL
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers