Vue - Vue中使用 transition 过渡动画、Animate.css 库动画

一. transition

• transition 标签包裹的内容会有一个过渡的动画效果
• 使用 transition 过渡组件需要满足的条件：
  1. 条件渲染（v-if）
  2. 条件展示（v-show）
  3. 动态组件
• 可以使用 name 属性给 transition 标签起名字
  1. class选择器名字和 name 属性有关系，这里 name 属性名为 fade, 则class选择器名称前缀都已fade开头，
  2. 如果不写name属性，则class选择器名称前缀默认以 v 开头
• transition 标签包裹的内容从隐藏变为显示时候动画原理
  1. 在动画即将被执行的一瞬间（动画执行的第一帧），会向transition内部的标签上增加两个class选择器名字，分别是v-enter、v-enter-active
  2. 在动画运行到第二帧的时候，会把 v-enter 的class选择器名称移除，然后增加一个v-enter-to的选择器名称
  3. 在动画执行结束的时候(动画执行的最后一帧），会把添加v-enter-active、v-enter-to的class选择器名称移除
• transition 标签包裹的内容从隐藏变为显示时候动画原理
  1. 在隐藏的第一个瞬间（动画执行的第一帧），会向transition内部的标签上增加两个class选择器名字，分别是v-leave、v-leave-active
  2. 在动画运行到第二帧的时候，会把 v-leave 的class选择器名称移除，然后增加一个v-leave-to的选择器名称
  3. 在动画执行结束的时候(动画执行的最后一帧），会把添加v-leave-active、v-leave-to的class选择器名称移除
• 过渡CSS类名
  中的name属性用于 替换 vue钩子函数中的类名 v ,默认为 v
  1. v-enter: 定义进入动画之前，元素的起始状态。在元素被插入时生效，在下一个帧移除。
  2. v-enter-active: 定义进入动画的状态。在元素被插入时生效，在transition/animation完成之后移除。
  3. v-leave:定义离开之后动画的终止状态。在离开过渡被触发时生效，在下一个帧移除。
  4. v-leave-active: 定义离开动画的结束状态。在离开过渡被触发时生效，在transition/animation完成之后移除。

一个过渡动画的实例：

二. Vue 中使用 @keyframes

1. @keyframes 的使用

1. style 中设置@keyframes
2. transition 标签 class样式中使用 @keyframes样式名称，这里为 bounce-in

三. Vue 中使用Animate.css库

1. 使用Animate.css库，设置动画

Animate.css 官网：https://animate.style/

1. 项目中引入 Animate.css 库
   使用教程：https://animate.style/#documentation

2. 使用 Animate.css 库
   

3. 一个实例

2. 页面刷新，展示Animate.css库动画效果

上面设置的动画效果，在刷新的时候是没有效果的；如果需要在页面刷新时，也展示动画效果，需要添加以下设置：

3. 同时使用 transition 动画，和Animate.css 库动画效果

1. 增加 class 名
   

2. style 中编写对应的样式
   

3. 同时使用 transition 动画，和 Animate.css 库动画，动画时长不一致时，手动设置动画时长基准。设置 type 属性
   Animate.css 库动画默认为一秒结束，这里 transition 动画设置的时 3 秒结束，所以以 transition 动画为基准，三秒结束动画
   type="transition"
   

4. 自定义动画时长
   为 transition 标签添加绑定 duration 属性，值为毫秒数
   :duration="10000"
   

5. 自定义动画时长，分别设置显示和隐藏的动画时长
   为 transition 标签添加绑定 duration 属性，值为一个对象
   :duration="{enter:5000,leave:10000}"
   

6. 一个实例