本文只是結合一些代碼和圖片加強對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>