溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、實現動畫過渡效果的幾種方式
實現動畫必須要將要進行動畫的元素利用<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">
<h2 class="title">購物車</h2>
<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（）中設置新的樣式，不然又可能實現不了動畫的效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
