一、實現動畫過渡效果的幾種方式
實現動畫必須要將要進行動畫的元素利用<transition>標簽進行包裹
1、利用CSS樣式實現過渡效果
<transition name="fade"></transition>
1.v-enter: 定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。
2.v-enter-active: 定義進入過渡的結束狀態。在元素被插入時生效，在 transition/animation 完成之后移除。
3.v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。
4.v-leave-active: 定義離開過渡的結束狀態。在離開過渡被觸發時生效，在 transition/animation 完成之后
通過name的名稱進行重命名，在樣式文件中進行.fade-enter-active設置動畫的效果即transition屬性，需要注意的是動畫結束后樣式將會移除，所以如果想要動畫實現之后元素保持有某個樣式，則需要transition標簽里面的元素的樣式表中進行設置，此情況是針對元需要通過改變元素的屬性來顯示元素，如定位top，left以及通過transform將顯示的元素的位置改變從而讓元素出現在當前的視圖窗口中時，但是如果元素v-show為true之后元素已經在視圖中央顯示了，不需要位置的移動將元素移動到視圖中，只是想要顯示的時候顯示有動畫效果的，則直接將動畫結束的屬性設置在v-enter-active/v-leave-active中即可。也就是說動畫的屬性如果只是產生效果，不對元素的任何屬性進行修改，也就是動畫中的屬性樣式不需要永久添加到dom元素中，則直接按后者的方式定義，如果說動畫的屬性同時相對元素進行樣式設計，屬性樣式需要被添加到dom元素上，則需要按照前者的方式。
<transition name="fold"> <div class="shopcart-list" v-show="listShow"> <div class="list-header"> <h1 class="title">購物車</h1> <span class="empty" @click="empty">清空</span> </div> <div class="list-content" ref="list"> <ul> <li class="food border-1px" v-for="(food,index) in selectFoods" v-show="food.count>0"> <span class="name">{{selectName[index]}}</span> <div class="price"> <span>￥{{food.price*food.count}}</span> </div> <div class="cartcontrol-wrapper"> <v-cartcontrol :food="food"></v-cartcontrol> </div> </li> </ul> </div> </div> </transition>.fold-enter-active,.fold-leave-active transition:all 0.5s .fold-enter,.fold-leave transform :translate3d(0,0,0) .shopcart-list position:absolute transform:translate3d(0,-100%,0)//動畫結束后的效果需要在此處進行設置，設置在.fold-enter-active中，元素動畫結束后該樣式屬性會被移除掉，將會看不到想要的效果 top: 100%//元素即使顯示也不再視圖窗口中，通過transform實現顯示 z-index:-1 width:100%
2、利用animation或者是動畫庫實現動畫效果
<div id="example-2"> <button @click="show = !show">Toggle show</button> <transition name="bounce"> <p v-if="show">Look at me!</p> </transition></div>
new Vue({ el: '#example-2', data: { show: true }}).bounce-enter-active { animation: bounce-in 0.5s linear;}.bounce-leave-active { animation: bounce-out 0.5s linear;}@keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); }}@keyframes bounce-out { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(0); }}3、自定義過度類名
他們的優先級高于普通的類名，這對于 Vue 的過渡系統和其他第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用。
<link rel="external nofollow" rel="stylesheet" type="text/css"><div id="example-3"> <button @click="show = !show"> Toggle render </button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello</p> </transition></div>
new Vue({ el: '#example-3', data: { show: true }})可以在樣式中同時使用transition和animation
4、利用JavaScript鉤子函數實現過渡效果
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled"> <!-- ... --></transition>
methods: { // -------- // 進入中 // -------- beforeEnter: function (el) { // ... }, // 此回調函數是可選項的設置 // 與 CSS 結合時使用 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // 離開時 // -------- beforeLeave: function (el) { // ... }, // 此回調函數是可選項的設置 // 與 CSS 結合時使用 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 只用于 v-show 中 leaveCancelled: function (el) { // ... }}在使用鉤子函數實現動畫的時候注意dom的異步刷新，需要結合this.$nextTick()，同時在leave和enter中設置樣式前最好迫使dom進行回流（reflow）使dom重新渲染，如獲取元素的offsetHeight等，然后在this.$nextTick（）中設置新的樣式，不然又可能實現不了動畫的效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
