与 React 动画不同的是，Vue 内部为我们提供了一些内置组件和对应的 API 来供我们完成动画，而不是像 React 一样需要借助第三方库 react-transition-group 等

提示

  可以先去看看我的 React 动画部分的笔记，提前体验一下 😂

vue 过渡动画的核心就是动态的添加/替换/移除已经编写好的 class（但这些 class 命名需要按照要求编写）

1、CSS 过渡 class

  在 vue 过渡动画中，一共有 6 个用于进入与离开过渡效果相关的 CSS class

与 vue3 中 CSS class 的差异

  v-enter、v-leave 改为了 v-enter-from、v-leave-from

  使用示例（v-是默认的类名前缀，是可以修改的：<transition name="my">）：

.my-enter,
.my-leave-to {
  opacity: 0;

  /* 过渡效果 */
  /* transform: translateX(10px); */
}

.my-enter-to,
.my-leave {
  opacity: 1;
}

.my-enter-active {
  transition: opacity 2s ease;

  /* transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); */
  /* animation: bounce-in 0.5s reverse; */
}

/* 动画效果 */
/* @keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
} */

2、Transition

  -<Transition> 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。

由 v-if / v-show 等所触发的切换

  当然，和 react 中一样，vue 的动画也可提供了 JavaScript 钩子供我们调用。

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>

<div id="app">
  <button @click="show = !show">Toggle show</button>
  <transition name="my" :duration="{ enter: 500, leave: 800 }" appear>
    <p v-if="show">进入/离开</p>
  </transition>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      show: true
    }
  })
</script>

  在涉及多个元素/组件的过渡时，我们可以使用 mode 属性：

<!-- 元素 -->
<transition name="fade" mode="out-in">
  <button v-if="isEditing" key="save">Save</button>
  <button v-else key="edit">Edit</button>
</transition>

<transition name="fade" mode="out-in">
  <button v-bind:key="isEditing">{{ isEditing ? 'Save' : 'Edit' }}</button>
</transition>

<!-- 组件 -->
<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>

3、TransitionGroup

  -<TransitionGroup> 是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。

<div id="app">
  <button @click="add">Add</button>
  <button @click="remove">Remove</button>
  <transition-group name="my" tag="ul">
    <li v-for="item in items" :key="item" class="list-item">{{ item }}</li>
  </transition-group>
</div>

  除此之外，<transition-group> 组件还有一个特殊的 CSS class：v-move，更多的还可以做出向排序过渡、交错过渡等效果。