Vue 封装的基于 CSS 的过渡与动画：

• 作用：在插入、更新或者移除 DOM 元素时，在合适的时候给元素的样式添加类名。

🔗 相关链接：官方文档 Transition | Vue.js (vuejs.org) (opens new window)

• 用法：（在 CSS 准备好以下的样式）
  • 元素进入的样式：
    • v-enter ：进入的起点
    • v-enter-to ：进入的终点
    • v-enter-active ：进入过程中
  • 元素离开的样式：
    • v-leave ：离开的起点
    • v-leave-to ：离开的终点
    • v-leave-active ：离开过程中
  • 使用 <transition> 标签包裹要应用过渡或者动画的元素，并且配置 name 属性；要对多个元素应用过渡或者动画，则使用 <transition-group> ，并且要指定 key 值。

动画效果

🌰 例子：

实现如下图示的例子：

• 不用考虑写两次进入和离开的动画，只要写一次进入的动画，然后将进入的动画倒放即可。

• 给动画创建一个关键帧 @keyframes ，添加动画样式：

.v-enter-active {
  animation: test 1s;
}

.v-leave-active {
  animation: test 1s reverse;
}

@keyframes test {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}

• 利用 Vue 实现动画样式的根据目前的 isShow 自动变化，想让谁有动画效果，谁就用 <transition> 标签：

<div>
  <button @click="isShow = !isShow">显示/隐藏</button>
  <transition>
    <h1 v-show="isShow" class="come">Hello Vue</h1>
  </transition>
</div>

命名问题：

当给 <transition> 一个 name 属性：

<transition name="show">
  <h1 v-show="isShow">Hello Vue</h1>
</transition>

Vue 过渡样式要随之修改为：

.show-enter-active {
  animation: test 1s;
}

.show-leave-active {
  animation: test 1s reverse;
}

name 用于标识某个动画样式，以免重复或者无法匹配。

• 追加细节，在开启页面时就有动画，在 <transition> 标签中使用 appear 属性即可。（有两种用法：直接 appear 或者 :apear=‘true’ ）

<transition name="show" appear>
  <h1 v-show="isShow">Hello Vue</h1>
</transition>

注意 <transition> 标签最后不会被解析到模版中的一个标签，Vue 通过这个标签给它匹配动画样式。

过渡效果

实现上述例子的另一种方法：

• 在动画样式中，设置进入的起点、终点，离开的起点、终点的样式：

/*进入的起点，离开的终点*/
.show-enter, .show-leave-to{
  transform: translateX(-100%);
}

/*进入的终点，离开的起点*/
.show-enter-to, .show-leave{
  transform: translateX(0);
}

• 要实现动画，可以在 h1 中添加动画，或者另外写一个激活动画：

h1{
  background-color: lightskyblue;
  transition: 0.5s linear;
}

或者

.show-enter-active, .show-leave-active{
	transition: 0.5s linear;
}

• 观察开发者工具可以看到，Vue 一般实现动画会在样式中放入三个动画样式，例如离开动画： .show-leave-active 、 .show-leave-to 、 .show-leave （起点一般动画速度太快而难以观察）。

多个元素实现同样的过渡动画效果

• 注意：一般 <transition> 标签只能应用于一个单独的标签元素。如果有多个元素就要使用 <transition-group> ，并且里面的每一个元素都要有一个唯一的 key 值（真实列表借助 v-for 实现）：

<transition-group name="show" appear>
  <h1 v-show="isShow" key="1">Hello</h1>
  <h1 v-show="isShow" key="2">Vue</h1>
</transition-group>

如果不用 <transition-group> 而使用一个 <div> 包裹两个元素，也可实现大致的效果。但是此时如果想要实现两个互斥的元素不同时出现，就不能单纯使用一个 <div> 包裹，只能通过 <transition-group> 实现。

<transition name="show" appear>
  <div v-show="isShow">
    <h1>Hello</h1>
    <h1>Vue</h1>>
  </div>
</transition>

<transition-group name="show" appear>
  <h1 v-show="isShow" key="1">Hello</h1>
  <h1 v-show="!isShow" key="2">Vue</h1>
</transition-group>

集成第三方动画

🔗 以 animate.css 为例：

• animate.css - npm (npmjs.com) (opens new window)
• Animate.css | A cross-browser library of CSS animations. (opens new window)

使用例子：

• 安装并引入 animate.css

$ npm install animate.css --save

import 'animate.css'

• 将 <transition> 相关的标签的 name 属性设置为 animate 相关值，如下

<transition-group 
	name="animate__animated animate__bounce" 
	appear>
  <h1 v-show="isShow" key="1">Hello</h1>
  <h1 v-show="!isShow" key="2">Vue</h1>
</transition-group>

• 加入动画（在官网上选择复制相关的类名称）：

<transition-group appear
                  name="animate__animated animate__bounce"
                  enter-active-class="animate__slideInUp"
                  leave-active-class="animate__slideOutUp"
>
  <h1 v-show="isShow" key="1">Hello</h1>
  <h1 v-show="!isShow" key="2">Vue</h1>
</transition-group>