今天統整一下學習 vue 的 Transition，會遇到的名詞，附上2個範例

掛上<Transition>後 vue 可以監聽底下的元素，當元素隱藏/移除/加入的時候可以動態賦予class做到動畫效果

<Transition>

官方文件:
https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component

• Transition 裡面只能包一個根節點
• 預設生成的 class 是 v- 開頭
• 可以給name，<Transition name="fade">去覆寫預設 class(v-)

動手玩玩看 Transition 範例

CSS class

圖片來源:https://cn.vuejs.org/assets/transition-classes.f0f7b3c9.png

// vue3
v-enter-from
v-enter-active
v-enter-to
v-leave-from
v-leave-active
v-leave-to

//vue2 有2個和vue3不同
v-enter*
v-enter-active
v-enter-to
v-leave*
v-leave-active
v-leave-to

hooks

進階使用者可以閱讀一下hooks

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
</Transition>

官方文件:
https://cn.vuejs.org/guide/built-ins/transition.html#javascript-hooks

<TransitionGroup>

官方文件:
https://cn.vuejs.org/guide/built-ins/transition-group.html#move-transitions

• TransitionGroup 和 Transition 一樣可以給 name 去更改 class
• 使用 tag 可以指定 v-for 渲染的元素 (下面的範例是ul)

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>

動手玩玩看 TransitionGroup 範例

參考文章

Summer前輩
https://www.cythilya.tw/2017/05/28/vue-transitions/