離開動(dòng)畫的過程

動(dòng)畫狀態(tài)一

• .fade-enter-active 進(jìn)場動(dòng)畫
• . fade-leave-active 離場動(dòng)畫

動(dòng)畫狀態(tài)二

• .fade-enter 進(jìn)場動(dòng)畫之前
• .fade-leave-to 離開動(dòng)畫之后
  當(dāng)中的fade是transition 標(biāo)簽的name屬性值 如下

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

• 過度類名的切換

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

2.v-enter-active：定義進(jìn)入過渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過渡的階段中應(yīng)用，在元素被插入之前生效，在過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)。

3.v-enter-to: 2.1.8版及以上 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter 被移除)，在過渡/動(dòng)畫完成之后移除。

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

5.v-leave-active：定義離開過渡生效時(shí)的狀態(tài)。在整個(gè)離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時(shí)立刻生效，在過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義離開過渡的過程時(shí)間，延遲和曲線函數(shù)。

6.v-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave 被刪除)，在過渡/動(dòng)畫完成之后移除。

如圖

/

css過渡動(dòng)畫

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#example-1',
  data: {
    show: true
  }
})

/* 可以設(shè)置不同的進(jìn)入和離開動(dòng)畫 */
/* 設(shè)置持續(xù)時(shí)間和動(dòng)畫函數(shù) */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

css動(dòng)畫

css動(dòng)中v-enter 類名不會(huì)在DOM插入的時(shí)候立即刪除，而是在animationed事件觸發(fā)的時(shí)候刪除

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>

new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

自定義過渡動(dòng)畫類

• 自定義過渡動(dòng)畫的類名可以結(jié)合第三方的css動(dòng)畫庫來實(shí)現(xiàn)動(dòng)畫這個(gè)很有用
  enter-class
  enter-active-class
  enter-to-class (2.1.8+)
  leave-class
  leave-active-class
  leave-to-class (2.1.8+)

<link  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>

顯性的設(shè)置過渡持續(xù)的時(shí)間 ||單獨(dú)設(shè)置進(jìn)入或者移除的時(shí)間

<transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

動(dòng)畫鉤子函數(shù)

• 可以在動(dòng)畫屬性中聲明動(dòng)畫鉤子如下

<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) {
    // ...
  },
  // 當(dāng)與 CSS 結(jié)合使用時(shí)
  // 回調(diào)函數(shù) done 是可選的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 離開時(shí)
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 當(dāng)與 CSS 結(jié)合使用時(shí)
  // 回調(diào)函數(shù) done 是可選的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }

• 在給一個(gè)列表添加過的時(shí)候使用transition-group 組件