使用方法

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show"> Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>

.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);
  }
}

有 6 種 class 類名會(huì)在進(jìn)入/離開(enter/leave)過渡中處理

### [過渡類名(Transition Classes)](https://vue.docschina.org/v2/guide/transitions.html#過渡類名-Transition-Classes "過渡類名(Transition Classes)")

1.  `v-enter`：進(jìn)入式過渡(entering transition)的開始狀態(tài)。在插入元素之前添加，在插入元素之后一幀移除。

2.  `v-enter-active`：進(jìn)入式過渡的激活狀態(tài)。應(yīng)用于整個(gè)進(jìn)入式過渡時(shí)期。在插入元素之前添加，過渡/動(dòng)畫(transition/animation)完成之后移除。此 class 可用于定義進(jìn)入式過渡的 duration, delay 和 easing 曲線。

3.  `v-enter-to`：**僅適用于版本 2.1.8+。**進(jìn)入式過渡的結(jié)束狀態(tài)。在插入元素之后一幀添加（同時(shí)，移除 `v-enter`），在過渡/動(dòng)畫完成之后移除。

4.  `v-leave`：離開式過渡(leaving transition)的開始狀態(tài)。在觸發(fā)離開式過渡時(shí)立即添加，在一幀之后移除。

5.  `v-leave-active`：離開式過渡的激活狀態(tài)。應(yīng)用于整個(gè)離開式過渡時(shí)期。在觸發(fā)離開式過渡時(shí)立即添加，在過渡/動(dòng)畫(transition/animation)完成之后移除。此 class 可用于定義離開式過渡的 duration, delay 和 easing 曲線。

6.  `v-leave-to`：**僅適用于版本 2.1.8+。**離開式過渡的結(jié)束狀態(tài)。在觸發(fā)離開式過渡之后一幀添加（同時(shí)，移除 `v-leave`），在過渡/動(dòng)畫完成之后移除。

自定義過渡class類名

你也可以通過提供一下屬性來指定自定義過渡類名
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
它們將覆蓋默認(rèn)約定的類名，這對于將 Vue 的過渡系統(tǒng)和其他現(xiàn)有的第三方 CSS 動(dòng)畫庫（如 [Animate.css](https://daneden.github.io/animate.css/)）集成使用會(huì)非常有用。
<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>

過度屬性

1.duration
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
2.mode
(1)
in-out：新元素先過渡進(jìn)入(transition in)，過渡完成之后，當(dāng)前元素過渡離開
(2)
out-in：當(dāng)前元素先過渡離開(transition out)，過渡完成之后，新元素過渡進(jìn)入
<transition name="fade" mode="out-in">
  <!-- ... the buttons ... -->
</transition>

鉤子函數(shù)

<script src="https://lib.baomitu.com/velocity/1.2.3/velocity.min.js"></script>
<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>

 beforeEnter: function (el) {
      el.style.opacity = 0
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }

多個(gè)組件過渡

多個(gè)組件之間的過渡甚至更簡單 - 我們不需要使用 `key` 屬性。相反，我們需要使用[動(dòng)態(tài)組件]
<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>
new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }
})
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active 在低于 2.1.8 版本中 */ {
  opacity: 0;
}

進(jìn)入式/離開式列表過渡

<div id="list-demo">
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</div>
new Vue({
  el: '#list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
  }
})

.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active 在低于 2.1.8 版本中 */ {
  opacity: 0;
  transform: translateY(30px);
}