1、實現動畫過渡效果的幾種方式css
實現動畫必需要將要進行動畫的元素利用<transition>標籤進行包裹html
一、利用CSS樣式實現過渡效果vue
<transition name="fade"></transition>git
v-enter
: 定義進入過渡的開始狀態。在元素被插入時生效,在下一個幀移除。github
v-enter-active
: 定義過渡的狀態。在元素整個過渡過程當中做用,在元素被插入時生效,在 transition/animation
完成以後移除。 這個類能夠被用來定義過渡的過程時間,延遲和曲線函數。app
v-enter-to
: 2.1.8版及以上 定義進入過渡的結束狀態。在元素被插入一幀後生效(於此同時 v-enter
被刪除),在 transition/animation
完成以後移除。dom
v-leave
: 定義離開過渡的開始狀態。在離開過渡被觸發時生效,在下一個幀移除。異步
v-leave-active
: 定義過渡的狀態。在元素整個過渡過程當中做用,在離開過渡被觸發後當即生效,在 transition/animation
完成以後移除。 這個類能夠被用來定義過渡的過程時間,延遲和曲線函數。函數
v-leave-to
: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發一幀後生效(於此同時 v-leave
被刪除),在 transition/animation
完成以後移除動畫
(1)經過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)若是要設置元素出現和隱藏的動畫效果不同則能夠分別設置樣式
HTML
<transition name="bounce"> <div v-show="showFlag" class="food"><div> </transition>
CSS
.bounce-enter-active transition:all 0.4s linear transform:translate3d(0,0,0) .bounce-enter transform :translate3d(100%,0,0) .bounce-leave-active transition:all 0.4s linear transform:translate3d(100%,0,0) .bounce-leave transform:translate3d(0,0,0)
利用動畫animation也能夠實現上面的效果
.bounce-enter-active animation :bounceIn 0.4s linear @keyframes bounceIn{ 0%{ transform :translate3d(100%,0,0) } 50%{ transform :translate3d(50%,0,0) } 100%{ transform :translate3d(0,0,0) } } .bounce-leave-active animation :bounceOut 0.4s linear @keyframes bounceOut{ 0%{ transform :translate3d(0,0,0) } 50%{ transform :translate3d(50%,0,0) } 100%{ transform :translate3d(100%,0,0) } }
二、利用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;//leave和enter的動畫效果不同 } .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); } }
三、自定義過分類名
enter-class
enter-active-class
enter-to-class
(>= 2.1.8 only)leave-class
leave-active-class
leave-to-class
(>= 2.1.8 only)他們的優先級高於普通的類名,這對於 Vue 的過渡系統和其餘第三方 CSS 動畫庫,如 Animate.css 結合使用十分有用。
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" 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
四、利用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()中設置新的樣式,否則有可能實現不了動畫的效果.
若想了解組件間的通訊機制,能夠看個人下一篇博客http://www.cnblogs.com/heshan1992/p/6905452.html