1.CSS動畫原理
動畫進入： 動畫如果不給名字，默認：v-enter
原理：在某一時刻給 div 添加 或 刪除一些樣式
<style> .fade-enter{ opacity:0; } .fade-enter-active{ transition: opacity 1s; //對opacity有一個監控，如果有變化則讓opacity在3s中從0變到一個opacity的值。 } } </style> <div id='root'> <transition name='fade'> <!--如果不給name，動畫默認名字v-enter --> <div v-show='show'>hello world</div> </transition> </div> <!-- 動畫原理說明：當動畫開沒執行的一瞬間，vue會幫我們在div標簽上加fade-enter 和 fade-enter-active 樣式， fade-enter-active的執行周期：動畫還沒開始，准備開始執行第一幀時就存在了，到動畫結束時才被移除 當執行到第二幀的時候，fade-enter 被刪除，同時 fade-enter-active 中的opacity 檢測到變化，就在1s 中變化opacity的值 -->
動畫離開：
<style> .fade-leave-to{ opacity:0; } .fade-leave-active{ transition: opacity 3s; } } </style> <div id='root'> <transition name='fade'> <div v-show='show'>hello world</div> </transition> </div> <!-- 動畫原理說明：動畫開始和結束的瞬間，頁面上都有一個fade-leave-active,在動畫的運行過程中，要求時刻監聽着 div 的opacity這個屬性，一旦發生變化，就讓他 三秒鍾 進行慢慢的過渡。 第一幀的時候，動畫把持原有的狀態，當進入第二幀時，div 多了一個 fade-leave-to 的屬性，fade-leave-active 檢測到 opacity 有變化，則在3秒鍾 對opacity 進行過渡 -->
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/vue.js"></script> <style> .v-enter, .v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: all 2s; } </style> </head> <body> <div class="app"> <transition> <div v-if='show'>一個有CSS特效的內容</div> </transition> <button @click='btnClick'>切換</button> </div> <script> new Vue({ el: '.app', data: { show: true }, methods: { btnClick: function() { this.show = !this.show; } } }); </script> </body> </html>
2.vue中使用animate.css庫
第一步：先在頁面中引入animate.css庫
第二步：必須自定義動畫樣式名字（animated）
<!--<transition enter-active-class='animated 動畫名稱'>--> <transition enter-active-class='animated swing' leave-active-class='animated shake'>
3.使用 appear 讓元素第一次顯示的時候也有動畫（初次動畫）
<transition appear <!--聲明--> enter-active-class='animated swing' leave-active-class='animated shake' appear-active-class='animated swing' <!--設置第一次顯示的時候的動畫--> > <div v-show='show'>帶有動畫效果的文字</div> </transition>
4.同時使用過渡和動畫
<transition <!-- type:'transition' --><!--定義以自己寫的動畫時長為准--> :duration:"{enter:5000,leave:10000}"<!--分別定義動畫開始時間用5s，離開時間用10s--> appear <!--聲明--> enter-active-class='animated swing v-enter-active' <!--同時使用過渡和動畫--> leave-active-class='animated shake v-leave-active'<!--同時使用過渡和動畫--> appear-active-class='animated swing' <!--設置第一次顯示的時候的動畫--> > <!--如果過渡和自己定義的動畫時長不一致，特意定義使用誰的時長為准（type：'transition'）-->
5.vue中的 JS 動畫與 velocity.js
1）vue中也有很多JS動畫鈎子
<transition name='fade' @before-enter='beforeEnter' <!--元素即將顯示時，事件被觸發時--> @enter='enterClick' <!--執行動畫時，事件被觸發--> @after-enter='afterEnter' <!--動畫完成時，事件被觸發--> > <div v-show='show'>文字內容</div> </transition>
methods:{ beforeEnter:function(el){ // before-enter 有一個參數 el 是div元素 el.style.color='red'; }， enterClick:function(el,done){ //enter 有兩個參數，done是回調函數 setTimeout(function(){ el.style.color='green' },2000); setTimeout(function(){ done(); //調用回調函數，才會執行 after 鈎子 },4000); }， afterEnter:function(el){ //after里面有一個參數 el.style.color="#000"; } }
2）velocity.js
通過 velocity.js 的簡單語法可以實現酷炫的動畫效果
methods:{ beforeEnter:function(el){ // 設置opacity=0 el.style.opacity=0; }， enterClick:function(el,done){ Velocity(el,{ //元素名 opacity:1 //設置效果 },{ duration:1000, //設置過渡時間 complete:done // 回調函數，執行after }); }， afterEnter:function(el){ // console.log('動畫結束'); } }
6.多個元素或組件過渡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/vue.js"></script> <style> .v-enter { opacity: 0; } .v-enter-active { transition: all 1s; } </style> </head> <body> <div class="root"> <!-- mode過渡方式 out-in：先隱藏再顯示 in-out：先顯示再隱藏 --> <transition mode='out-in'> <!-- <child v-if='show'>child</child> <child-one v-else>child-one</child-one> --> <!-- 動態組件過渡 --> <component :is='type'></component> </transition> <button @click='btnClick'>切換</button> </div> <script> Vue.component('child', { template: "<div>child-組件</div>" }); Vue.component('child-one', { template: '<div>child-one-組件</div>' }); var vm = new Vue({ el: '.root', data: { // show: 'true' type: 'child' }, methods: { btnClick: function() { // this.show = !this.show; this.type = (this.type == 'child' ? 'child-one' : 'child'); } } }); </script> </body> </html>
7.Vue中的列表過渡（transition-group）
用法和 transition 一致
<transition-group> <div v-for='item of list' :key='item.id'>{{item.title}}</div> </transition-group> <!--等同於多組加了動畫的div--> <transition> <div>Hello World</div> </transition> <transition> <div>Hello World</div> </transition> ...
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/vue.js"></script> <style> .v-enter, .v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: all 1s; } </style> </head> <body> <div class="app"> <button @click='btnAdd'>Add</button> <!--動畫組--> <transition-group> <!--for循環中 這里的key值不建議使用index，會影響性能--> <div v-for='item of list' :key='item.id'>{{item.title}}</div> </transition-group> </div> <script> var count = 0; var vm = new Vue({ el: '.app', data: { list: [] }, methods: { btnAdd: function() { this.list.push({ id: count++, title: 'Hello World' + count }); } } }); </script> </body> </html>