vue实现循环切换动画
2018-12-03 09:26
1051 查看
本文实例为大家分享了vue实现循环切换动画的具体代码,供大家参考,具体内容如下
注意动画的钩子函数的判断逻辑,注意动画编写时类名的顺序!!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <style> .box{ width: 200px; height: 200px; background-color: red; } .guo-enter-active,.guo-leave-active{ width: 200px; height: 200px; opacity: 1; background-color: red; transition: 0.7s; } .guo-leave-to{ width: 100px; height: 100px; opacity: 0; background-color: orange; } .guo-enter{ width: 100px; height: 100px; opacity: 0; background-color: orange; } .box2{ margin-top: 100px; } </style> <script src='vue.min.js'></script> </head> <body> <div id='app'> <div> <input type="button" value='change' @click='change'> <transition name='guo' @after-enter='Enter' @after-leave='Leave'> <div v-show='show' class='box'></div> </transition> <transition name='guo' @enter='Enter2' @after-leave='Leave2'> <div v-show='show2' class='box box2'></div> </transition> </div> </div> <script> new Vue({ el:'#app', data:{ show:false, show2:false }, methods:{ change(){ this.show = !this.show; }, Enter(){ this.show2 = true; }, Leave(){ this.show2=false; }, Leave2(){ this.show = true; }, Enter2(){ this.show = false; } } }); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue-router结合transition实现app前进后退动画切换效果
- vue实现app页面切换动画效果实例
- 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
- Vue-router结合transition实现app前进后退动画切换效果
- Vue.js实现微信过渡动画左右切换效果
- vue-router实现webApp切换页面动画效果代码
- Vue-router结合transition实现app前进后退动画切换效果的实例
- Android 深入ViewPager补间动画,实现类京东商城首页广告Banner切换效果
- 使用ViewFlipper和translate动画实现滑屏切换画面——translate
- 关于ListView或控件选择循环切换的实现方法
- 实现Viewpager切换界面导航栏水波纹动画效果
- Android 循环读数字动画实现
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- 利用vue实现多层循环
- Android实现移动小球和CircularReveal页面切换动画实例代码
- Activity 过度动画让界面切换实现如牛奶般润滑的切换
- Css实现页内多个div之间的切换动画
- 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
- [置顶] cocos2d-x 植物大战僵尸(13)类似酷跑的【同一角色不同动画间的切换的实现】