本文只是结合一些代码和图片加强对Vue动画的理解，更多资料请戳这里
结合原生CSS实现动画
下面是一张图片，简单清晰明了是吧^-^
下面是一段代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .show-enter-active,.show-leave-active{ transition: all 0.4s ease; padding-left: 10px; } .show-enter,.show-leave-active{ padding-left: 100px; } </style> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <button @click="toggle">点击隐藏和显示</button> <transition name="show"> <h3 v-show="isshow">{{message}}</h3> </transition> </div> <script> new Vue({ el: '#app', data: { message:"hello Vue!", isshow:false }, methods:{ toggle:function(){ this.isshow = !this.isshow; } } }) </script> </body> </html>
结合animate.css实现动画
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/animate.css/3.1.0/animate.min.css" /> <style> .show{ transition: all 0.4s ease; } </style> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <button @click="toggle">点击隐藏和显示</button> <transition enter-active-class="fadeInRight" leave-active-class="fadeOutRight"> <div v-show="isshow" class="animated" class="show">{{message}}</div> </transition> </div> <script> new Vue({ el: '#app', data: { message:"hello Vue!", isshow:false }, methods:{ toggle:function(){ this.isshow = !this.isshow; } } }) </script> </body> </html>
使用钩子函数实现动画效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .show{ transition: all 0.4s ease; } </style> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <button @click="toggle">点击隐藏和显示</button> <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div v-show="isshow" class="show">{{message}}</div> </transition> </div> <script> new Vue({ el: '#app', data: { message:"hello Vue!", isshow:false }, methods:{ toggle:function(){ this.isshow = !this.isshow; }, beforeEnter:function(el){ //定义当前实现动画的初始位置 el.style.transform = "translate(100px,0)"; }, enter:function(el,done){ //设置一下刷新状态 el.offsetWidth; //设置动画的结束位置 el.style.transform = "translate(0px,0)"; //手动调用一下done方法，由这个方法去决定动画是否结束了 //否则动画的消失会有延迟 done(); }, afterEnter:function(el){ //将动画的状态复原设置 this.isshow = !this.isshow; } } }) </script> </body> </html>