快捷導(dǎo)航

詳解Vue中過度動畫效果應(yīng)用

更新時間：2017年05月25日 08:22:13 作者：heshan珊

這篇文章主要介紹了詳解Vue中過度動畫效果應(yīng)用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、實(shí)現(xiàn)動畫過渡效果的幾種方式

實(shí)現(xiàn)動畫必須要將要進(jìn)行動畫的元素利用<transition>標(biāo)簽進(jìn)行包裹

1、利用CSS樣式實(shí)現(xiàn)過渡效果

 <transition name="fade"></transition>

1.v-enter: 定義進(jìn)入過渡的開始狀態(tài)。在元素被插入時生效，在下一個幀移除。

2.v-enter-active: 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入時生效，在 transition/animation 完成之后移除。

3.v-leave: 定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時生效，在下一個幀移除。

4.v-leave-active: 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)時生效，在 transition/animation 完成之后

通過name的名稱進(jìn)行重命名，在樣式文件中進(jìn)行.fade-enter-active設(shè)置動畫的效果即transition屬性，需要注意的是動畫結(jié)束后樣式將會移除，所以如果想要動畫實(shí)現(xiàn)之后元素保持有某個樣式，則需要transition標(biāo)簽里面的元素的樣式表中進(jìn)行設(shè)置，此情況是針對元需要通過改變元素的屬性來顯示元素，如定位top，left以及通過transform將顯示的元素的位置改變從而讓元素出現(xiàn)在當(dāng)前的視圖窗口中時，但是如果元素v-show為true之后元素已經(jīng)在視圖中央顯示了，不需要位置的移動將元素移動到視圖中，只是想要顯示的時候顯示有動畫效果的，則直接將動畫結(jié)束的屬性設(shè)置在v-enter-active/v-leave-active中即可。也就是說動畫的屬性如果只是產(chǎn)生效果，不對元素的任何屬性進(jìn)行修改，也就是動畫中的屬性樣式不需要永久添加到dom元素中，則直接按后者的方式定義，如果說動畫的屬性同時相對元素進(jìn)行樣式設(shè)計(jì)，屬性樣式需要被添加到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)//動畫結(jié)束后的效果需要在此處進(jìn)行設(shè)置，設(shè)置在.fold-enter-active中，元素動畫結(jié)束后該樣式屬性會被移除掉，將會看不到想要的效果
   top: 100%//元素即使顯示也不再視圖窗口中，通過transform實(shí)現(xiàn)顯示
   z-index:-1
   width:100%

2、利用animation或者是動畫庫實(shí)現(xiàn)動畫效果

<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、自定義過度類名

enter-class
enter-active-class
leave-class
leave-active-class

他們的優(yōu)先級高于普通的類名，這對于 Vue 的過渡系統(tǒng)和其他第三方 CSS 動畫庫，如 Animate.css 結(jié)合使用十分有用。

<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鉤子函數(shù)實(shí)現(xiàn)過渡效果

<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: {
 // --------
 // 進(jìn)入中
 // --------
 beforeEnter: function (el) {
  // ...
 },
 // 此回調(diào)函數(shù)是可選項(xiàng)的設(shè)置
 // 與 CSS 結(jié)合時使用
 enter: function (el, done) {
  // ...
  done()
 },
 afterEnter: function (el) {
  // ...
 },
 enterCancelled: function (el) {
  // ...
 },
 // --------
 // 離開時
 // --------
 beforeLeave: function (el) {
  // ...
 },
 // 此回調(diào)函數(shù)是可選項(xiàng)的設(shè)置
 // 與 CSS 結(jié)合時使用
 leave: function (el, done) {
  // ...
  done()
 },
 afterLeave: function (el) {
  // ...
 },
 // leaveCancelled 只用于 v-show 中
 leaveCancelled: function (el) {
  // ...
 }
}

在使用鉤子函數(shù)實(shí)現(xiàn)動畫的時候注意dom的異步刷新，需要結(jié)合this.$nextTick()，同時在leave和enter中設(shè)置樣式前最好迫使dom進(jìn)行回流（reflow）使dom重新渲染，如獲取元素的offsetHeight等，然后在this.$nextTick（）中設(shè)置新的樣式，不然又可能實(shí)現(xiàn)不了動畫的效果

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: