Vuejs第七篇之Vuejs過渡動畫案例全面解析
本篇資料是小編結(jié)合官方文檔整理的一套更全面細致的說明，代碼更多更全。
本篇資料來于官方文檔：
http://cn.vuejs.org/guide/transitions.html
下面看下過渡動畫相關(guān)知識：
①過渡動畫的定義；
簡單來說，就是當模塊消失、出現(xiàn)時，會以什么樣的形式消失和出現(xiàn)；
如果要使用過渡動畫，則在標簽里加入屬性：
transition=”過渡動畫名”
例如：
<div class="box" v-if="box_1" transition="mytran">1</div>
這里是mytran就是過渡動畫名，他是一個類名，動畫將基于這個名字而添加多個不同的擴展名（具體請參看下面）
②過渡動畫綁定的事件：
【1】v-if
【2】v-show
【3】v-for（只在插入和刪除時觸發(fā)，可以自己寫，或者使用vue-animated-list插件）；
自己寫例如：
<div v-for="i in items" class="box" transition="mytran">{{i}}</div>
動畫寫法略（參照下面）
【4】動態(tài)組件；
【5】在組件的根節(jié)點上，并且被Vue實例DOM方法觸發(fā)（例如：vm.$appendTo(el)）。大概就是說，把組件添加到某個根節(jié)點上去。
③CSS動畫：
【1】首先，需要有transition屬性，然后取得其值；
【2】其次，CSS里需要有以值為名的三個類名，分別是：
假設(shè)transition的值為mytran，則類名為
說明
.mytran-transition
動畫狀態(tài)，css的transition屬性放在這里，他表示的類會始終存在于DOM之上；
另外這里的樣式會覆蓋標簽的默認class提供的樣式
.mytran-enter
進入時，組件從這個css狀態(tài)擴展為當前css狀態(tài)，這個類只存在最開始的一幀
.mytran-leave
退出時，組件從原來的css狀態(tài)恢復為這個狀態(tài)，這個類從退出開始時生效，在退出結(jié)束時刪除。
如代碼：
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
/*這個定義動畫情況，以及存在時的樣式，這個樣式會覆蓋class里的樣式*/
.mytran-transition {
transition: all 0.3s ease;
background-color: greenyellow;
}
/* .mytran-enter 定義進入的開始狀態(tài) */
/* .mytran-leave 定義離開的結(jié)束狀態(tài) */
.mytran-enter, .mytran-leave {
height: 0;
width: 0;
}
</style>
<div id="app">
<button @click="change">點擊隨機隱藏和顯示</button>
<br/>
<div class="box" v-if="box_1" transition="mytran">1</div>
<div class="box" v-if="box_2" transition="mytran">2</div>
<div class="box" v-if="box_3" transition="mytran">3</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
box_1: true,
box_2: true,
box_3: true
},
methods: {
change: function () {
for (var i = 1; i < 4; i++) {
this['box_' + i] = Math.random() > 0.5 ? true : false;
}
}
}
})
setInterval(vm.change, 300);
</script>
點擊會隨機讓3個方塊隱藏或者顯示；
④JavaScript鉤子：
【1】簡單來說，這個不影響CSS動畫（依然是那三個類的變化）；
【2】這個主要用于抓取進入和離開各四個時刻，用于做某些事情；
【3】這八個時刻分別為：
進入：beforeEnter（進入之前），enter（進入動畫剛開始），afterEnter（進入動畫結(jié)束），enterCancelled（進入被中斷）；
退出：beforeLeave（退出之前），leave（退出動畫剛開始），afterLeave（退出動畫結(jié)束），leaveCancelled（退出被中斷）；
【4】對DOM的修改，部分情況下會恢復，例如在leave這一步修改dom的textContent屬性，將在dom重新進入時恢復原狀；但若在enter這一步修改，則不會恢復。
如代碼：
Vue.transition('mytran', {
beforeEnter: function (el) { //進入之前
console.log("進入動畫開始時間:" + new Date().getTime());
},
enter: function (el) {
el.textContent = new Date();
},
afterEnter: function (el) {
console.log("進入結(jié)束時間:" + new Date().getTime());
},
beforeLeave: function (el) {
console.log("離開動畫開始時間:" + new Date().getTime());
},
leave: function (el) {
$(el).text("離開中..." + new Date());
},
afterLeave: function (el) {
console.log("離開結(jié)束時間:" + new Date().getTime());
}
})
⑤自定義過渡類名：
之所以要自定義過渡類名，是因為我們不可能要求每個css動畫的樣式，都是按照Vuejs標準的寫法來寫的（比如我們下載別人寫的代碼）；
注：需要在聲明相關(guān)的Vue實例之前進行定義。
首先，推薦一個Vuejs官方教程推薦的動畫集合：（這個不是下載鏈接，需要打開它去找到下載鏈接才能下載）
https://daneden.github.io/animate.css/
下載后，導入這個css文件，然后開始自定義動畫；
<div id="app">
<button @click="change">點擊隨機隱藏和顯示</button>
<br/>
<div class="box animated" v-if="box" transition="bounce">1</div>
</div>
<script>
Vue.transition("bounce", {
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})
var vm = new Vue({
el: '#app',
data: {
box: true
},
methods: {
change: function () {
this.box = !this.box;
}
}
});
</script>
解釋：
【1】進行動畫的標簽，需要有animated這個class；
【2】enterClass和leaveClass相當于之前的xxx-enter和xxx-leave；
【3】效果是從左邊閃進來，從右邊閃出去。
【4】需要在聲明Vue實例前設(shè)置動畫，否則會無效；
⑥使用animation動畫
在Vuejs中，animation動畫和transition動畫是不同的。
簡單來說，transition動畫分為三步：常駐類，進入時觸發(fā)的類，退出時觸發(fā)的類；只有常駐類有transition動畫屬性，其他兩步只有css狀態(tài)；
而animation動畫分為兩步：進入時觸發(fā)的類，退出時觸發(fā)的類。當然，還有xxx-transition這個類存在于dom之中（這個類可以用于設(shè)置動畫原點，或者干脆不設(shè)置這個類）；
在animation動畫中，進入和退出時的class類，都應該有動畫效果，例如：
@keyframes fat {
0% {
width: 100px
}
50% {
width: 200px
}
100% {
width: 100px
}
}
.fat-leave, .fat-enter {
animation: fat 1s both;
}
進入和退出時，執(zhí)行的類名和transition一樣，都是xxx-leave和xxx-enter這樣格式的；
當然，也可以自定義類名。
示例代碼：
<style>
.box {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
@keyframes fat {
0% {
width: 100px
}
50% {
width: 200px
}
100% {
width: 100px
}
}
.fat-leave, .fat-enter {
animation: fat 1s both;
}
</style>
<div id="app">
<button @click="change">點擊隨機隱藏和顯示</button>
<br/>
<div class="box animated" v-if="box" transition="fat">1</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
box: true
},
methods: {
change: function () {
this.box = !this.box;
}
}
});
</script>
效果：
消失：先變寬，再恢復，然后消失；
進入：出現(xiàn)，變寬，再恢復，停留；
這里偷懶共用了同一個動畫效果。
⑦除此之外，還有
【1】顯式聲明動畫類型（假如動畫同時存在transition和animation，且分情況執(zhí)行其中一種）；
【2】過渡流程詳解（觸發(fā)動畫時，js鉤子執(zhí)行與css執(zhí)行的順序）；
【3】CSS動畫（就是animation，像上面那樣已經(jīng)寫過了，具體略）；
【4】JavaScript過渡（不是js鉤子，鉤子是指在某個階段會調(diào)用某個函數(shù)，但這個鉤子跟動畫無關(guān)），用JavaScript來控制動畫，比如jquery的animate方法；
【5】v-for使用的漸進過渡；
由于暫時用不上，所以略掉，需要查看的請打開連接：
http://cn.vuejs.org/guide/transitions.html
以上所述是小編給大家介紹的Vuejs第七篇之Vuejs過渡動畫案例全面解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue elementui tree 任意級別拖拽功能代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
關(guān)于Nuxt的五種渲染模式的差異和使用場景全解析
這篇文章主要介紹了關(guān)于Nuxt的五種渲染模式的差異和使用場景全解析,在過去傳統(tǒng)開發(fā)中，頁面渲染任務(wù)是由服務(wù)端完成的,那么Nuxt是如何渲染的呢,需要的朋友可以參考下2023-04-04
最近在vue中安裝Three.js,無聊順便研究一些關(guān)于3D圖形化庫,下面這篇文章主要給大家介紹了關(guān)于vue+threejs寫物體動畫之物體縮放動畫效果的相關(guān)資料,需要的朋友可以參考下2022-10-10
在使用vue開發(fā)項目的時候,很多使用會import很多模塊,這篇文章主要給大家介紹了關(guān)于vue中import導入三種方式的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹了vue使用echart自定義標簽以及顏色，應用于echart 5.0以上版本，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
解決el-select數(shù)據(jù)量過大的3種方案
最近做完一個小的后臺管理系統(tǒng),快上線了,發(fā)現(xiàn)一個問題,有2個select的選項框線上的數(shù)據(jù)量是1w+,而測試環(huán)境都是幾百的,所以導致頁面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下2023-09-09
Vue router-view和router-link的實現(xiàn)原理
這篇文章主要介紹了Vue router-view和router-link的實現(xiàn)原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
vue中選項卡點擊切換且能滑動切換功能的實現(xiàn)代碼
本文通過實例代碼給大家介紹了vue中選項卡點擊切換且能滑動切換功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下2018-11-11
本篇文章主要介紹了vue-cli如何引入bootstrap工具的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了Vue 自定義組件 v-model 使用介紹,包括vue2中使用和vue3中使用，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08