法眼,小人冒险之先睹为快,川娇群
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论