Vue.js進入/離開 & 列表過渡 傳送門
進入/離開過渡效果：Vue在插入、更新或移除DOM時，可以設置一些動畫效果；
過渡效果中也提供了對應的鈎子函數，這些鈎子函數需要在<transition>組件上綁定，然后再實現
Vue中的過渡效果也可以與其他第三方CSS動畫庫一起使用，例如Animate.css
如果是對多個元素過渡，例如列表，這時就要用到<transition-group>這個組件了
Learn
一、進入/離開過渡效果
二、過渡效果的鈎子函數
三、Vue過渡效果+Animate.css[Animate.css 傳送門]
四、列表過渡
目錄結構
【每個demo下方都存有html源碼】
一、進入/離開過渡效果 傳送門
進入/離開過渡效果：Vue在插入、更新或移除DOM時，可以設置一些動畫效果
如何使用過渡效果：利用<transition></transition>組件將需要應用的過渡效果的DOM對象包裹住，然后書寫對應的樣式
過渡的類名：過渡效果的樣式是類樣式，在進入/離開的過渡中有6個類樣式的切換，分別是
v-enter：定義進入過渡的開始狀態；
v-enter-active：定義進入過渡生效狀態，在這里可以定義進入過渡的時間、延遲、曲線函數等；
v-enter-to：定義進入過渡結束狀態；
v-leave：定義離開過渡的開始狀態；
v-leave-active：定義離開過渡生效狀態，在這里可以定義離開過渡的時間、延遲、曲線函數等；
v-leave-to：定義離開過渡結束狀態；
通過Button給來控制動畫的進入和離開，初始值設置flag為false
<div id="GaryId"> <button @click="flag = !flag">顯示/隱藏</button><br /> <!--需要添加css的div使用transition標簽--> <transition name='fade'> <div v-show='flag' class="mybtn"></div> </transition> </div>
<style type="text/css"> .mybtn{ margin: 0 auto; width: 100px; height: 100px; background-color: red; /*div從左到右移動位移*/ transform: translateX(20px); } .fade-enter-active, .fade-leave-active{ /*進入和離開時時間為2s*/ transition: all 2s; } .fade-enter{ /*設置透明度為0*/ opacity: 0; transform: translateX(0px); } .fade-enter-to{ opacity: 1; transform: translateX(20px); } .fade-leave{ opacity: 1; } .fade-leave-to{ opacity: 0; transform: translateX(0px); } </style>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gary</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="GaryId"> <button @click="flag = !flag">顯示/隱藏</button><br /> <!--需要添加css的div使用transition標簽--> <transition name='fade'> <div v-show='flag' class="mybtn"></div> </transition> </div> </body> <style type="text/css"> .mybtn{ margin: 0 auto; width: 100px; height: 100px; background-color: red; /*div從左到右移動位移*/ transform: translateX(20px); } .fade-enter-active, .fade-leave-active{ /*進入和離開時時間為2s*/ transition: all 2s; } .fade-enter{ /*設置透明度為0*/ opacity: 0; transform: translateX(0px); } .fade-enter-to{ opacity: 1; transform: translateX(20px); } .fade-leave{ opacity: 1; } .fade-leave-to{ opacity: 0; transform: translateX(0px); } </style> <script> let vm = new Vue({ data:{ flag:false } }).$mount('#GaryId'); </script> </html>
二、過渡效果的鈎子函數 傳送門
過渡效果中也提供了對應的鈎子函數，這些鈎子函數需要在<transition>組件上綁定，然后再實現
過渡效果的鈎子函數有：
@before-enter=“beforeEnter“ ：進入過渡運行前
@enter=“enter“：進入過渡運行時
@after-enter=“afterEnter“：進入過渡運行后
@enter-cancelled=“enterCancelled“：進入過渡被打斷時
@before-leave=“beforeLeave“：離開過渡運行前
@leave=“leave“：離開過渡運行時
@after-leave=“afterLeave“：離開過渡運行后
@leave-cancelled=“leaveCancelled“：離開過渡被打斷時
<body>中添加過渡效果的鈎子函數，transition中鈎子函數的名稱不可以修改，方法可以修改【盡量和文檔中名字一樣】
<div id="GaryId"> <button @click="flag = !flag">顯示/隱藏</button><br /> <transition name='fade' @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled" > <div v-show='flag' class="mybtn"></div> </transition> </div>
第一次演示進入過渡狀態開始前、進入過渡狀態開始、進入過渡狀態結束、離開過渡狀態開始前、離開過渡狀態開始、離開過渡狀態結束周期
第二次演示進入過渡狀態開始前、進入過渡狀態開始、進入過渡狀態被打斷、離開過渡狀態開始前、離開過渡狀態開始、離開過渡狀態結束周期
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gary</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="GaryId"> <button @click="flag = !flag">顯示/隱藏</button><br /> <transition name='fade' @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled" > <div v-show='flag' class="mybtn"></div> </transition> </div> </body> <style type="text/css"> .mybtn{ margin: 0 auto; width: 100px; height: 100px; background-color: red; /*div從左到右移動位移*/ transform: translateX(20px); } .fade-enter-active, .fade-leave-active{ /*進入和離開時時間為2s*/ transition: all 2s; } .fade-enter{ /*設置透明度為0*/ opacity: 0; transform: translateX(0px); } .fade-enter-to{ opacity: 1; transform: translateX(20px); } .fade-leave{ opacity: 1; } .fade-leave-to{ opacity: 0; transform: translateX(0px); } </style> <script> let vm = new Vue({ data:{ flag:false }, methods:{ beforeEnter(){ alert("beforeEnter 進入過渡狀態 開始 前"); }, enter(){ alert("enter 進入過渡狀態 開始"); }, afterEnter(){ alert("afterEnter 進入過渡狀態 結束"); }, enterCancelled(){ alert("enterCancelled 進入過渡狀態 被打斷"); }, beforeLeave(){ alert("beforeLeave 離開過渡狀態 開始 前"); }, leave(){ alert("leave 離開過渡狀態 開始"); }, afterLeave(){ alert("afterLeave 離開過渡狀態 結束"); }, leaveCancelled(){ alert("leaveCancelled 離開過渡狀態 被打斷"); } } }).$mount('#GaryId'); </script> </html>
當需要給鈎子函數傳參貼一個例子
enter(el){ alert("enter 進入過渡狀態 開始"); // 添加延時 setTimeout(()=>{ el.style.backgroundColor = 'green'; },400); }
三、Vue過渡效果+Animate.css 傳送門
Vue中的過渡效果也可以與其他第三方CSS動畫庫一起使用，例如Animate.css；
使用第三方動畫庫我們需要用到自定義過渡類名：
enter-class；
enter-active-class；
enter-to-class；
leave-class；
leave-active-class；
leave-to-class；
<body> <div id="GaryId"> <button @click="flag = !flag">顯示/隱藏</button><br /> <transition name='fade' enter-to-class='animated zoomInDown' leave-to-class='animated zoomOutUp' > <div v-show='flag' class="mybtn"></div> </transition> </div> </body>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gary</title> <script type="text/javascript" src="../js/vue.js"></script> <link rel="stylesheet" type="text/css" href="../css/animate.css"/> </head> <body> <div id="GaryId"> <button @click="flag = !flag">顯示/隱藏</button><br /> <transition name='fade' enter-to-class='animated zoomInDown' leave-to-class='animated zoomOutUp' > <div v-show='flag' class="mybtn"></div> </transition> </div> </body> <style type="text/css"> .mybtn{ margin: 0 auto; width: 100px; height: 100px; background-color: red; /*div從左到右移動位移*/ transform: translateX(20px); } .fade-enter-active, .fade-leave-active{ /*進入和離開時時間為2s*/ transition: all 2s; } .fade-enter{ /*設置透明度為0*/ opacity: 0; transform: translateX(0px); } .fade-enter-to{ opacity: 1; transform: translateX(20px); } .fade-leave{ opacity: 1; } .fade-leave-to{ opacity: 0; transform: translateX(0px); } </style> <script> let vm = new Vue({ data:{ flag:false }, methods:{ beforeEnter(){ alert("beforeEnter 進入過渡狀態 開始 前"); }, enter(el){ alert("enter 進入過渡狀態 開始"); // 添加延時 setTimeout(()=>{ el.style.backgroundColor = 'green'; },400); }, afterEnter(){ alert("afterEnter 進入過渡狀態 結束"); }, enterCancelled(){ alert("enterCancelled 進入過渡狀態 被打斷"); }, beforeLeave(){ alert("beforeLeave 離開過渡狀態 開始 前"); }, leave(el){ alert("leave 離開過渡狀態 開始"); el.style.backgroundColor = 'red'; }, afterLeave(){ alert("afterLeave 離開過渡狀態 結束"); }, leaveCancelled(){ alert("leaveCancelled 離開過渡狀態 被打斷"); } } }).$mount('#GaryId'); </script> </html>
四、列表過渡 傳送門
之前我們一直在操作單個元素的過渡，如果是對多個元素過渡，例如列表，這時就要用到<transition-group>這個組件了；
如何使用：將要操作的列表元素放在<transition-group></transition-group>內，其他與<transition>基本一致；
注意：在<transition-group>的元素要指定個唯一的 :key 屬性
當綁定的key屬性相同時編譯器會報錯！！
<div id="GaryId"> <button @click="flag=!flag">顯示/隱藏</button><br /> <transition-group name='fade' tag='ul'> <div v-show='flag' class="mybtn" :key='a'></div> <div v-show='flag' class="mybtn" :key='b'></div> </transition-group> </div>
let vm = new Vue({ data : { flag : false, a : '1', b : '2' }, methods : { } }).$mount('#GaryId');
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gary</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="GaryId"> <button @click="flag=!flag">顯示/隱藏</button><br /> <transition-group name='fade' tag='ul'> <div v-show='flag' class="mybtn" :key='a'></div> <div v-show='flag' class="mybtn" :key='b'></div> </transition-group> </div> </body> <style type="text/css"> .mybtn{ margin: 0 auto; width: 100px; height: 100px; background-color: red; /*div從左到右移動位移*/ transform: translateX(20px); } .fade-enter-active, .fade-leave-active{ /*進入和離開時時間為2s*/ transition: all 2s; } .fade-enter{ /*設置透明度為0*/ opacity: 0; transform: translateX(0px); } .fade-enter-to{ opacity: 1; transform: translateX(20px); } .fade-leave{ opacity: 1; } .fade-leave-to{ opacity: 0; transform: translateX(0px); } </style> <script> let vm = new Vue({ data : { flag : false, a : '1', b : '1' }, methods : { } }).$mount('#GaryId'); </script> </html>
附貼上一個小案例【不需要添加animate.css】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gary</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="GaryId"> <button @click="addNum">添加數字</button><br /> <transition-group name='fade' tag='ul'> <li v-for='(item,index) in numArray' :key='item'> {{item}} <button @click='removeNum(index)'> - </button> </li> </transition-group> </div> </body> <style type="text/css"> .mybtn{ margin: 0 auto; width: 100px; height: 100px; background-color: red; /*div從左到右移動位移*/ transform: translateX(20px); } .fade-enter-active, .fade-leave-active{ /*進入和離開時時間為2s*/ transition: all 2s; } .fade-enter{ /*設置透明度為0*/ opacity: 0; transform: translateX(0px); } .fade-enter-to{ opacity: 1; transform: translateX(20px); } .fade-leave{ opacity: 1; } .fade-leave-to{ opacity: 0; transform: translateX(0px); } </style> <script> let vm = new Vue({ data : { flag : false, a : '1', b : '1', numArray : [1, 2, 3, 4, 5] }, methods : { addNum(){ let num = Math.ceil(Math.random() * 100); this.numArray.push(num); }, removeNum(index){ this.numArray.splice(index, 1); } } }).$mount('#GaryId'); </script> </html>