什么是 transition 动画？
过渡动画（transition）是一种在 Vue.js 中实现动画效果的方式。我们可以通过添加动画类，从而实现在特定场景下元素动态改变的时候产生流畅过渡的效果。transition 动画包括三个部分，分别是进入、离开和列表进入、离开时的动画效果。
如何使用 transition 动画？
使用示例
我们可以通过 v-if（或者 v-show）指定是否渲染一个元素，并在元素上添加 transition 组件进行动画效果的设置：
<transition name="fade">
<p v-if="show">这里是需要动态显示的内容。</p>
</transition>在上面的代码示例中，我们使用了 v-if 指令对需要动态显示的内容进行控制，并且为 transition 组件添加了 name 属性，并将其设置为 fade。接下来，我们可以在 CSS 样式文件中设置相应的过渡效果：
-- -------------------- ---- ------- ------------------- ------------------ - ----------- ------- ---- - ------------ -------------- - -------- -- -
上述代码表示：当元素首次渲染或者被加入到 DOM 中的时候，它的初始状态应该被设置为 opacity: 0；在进行动画效果时，需要将 opacity 属性值从 0 变为 1，此过程需要在 .fade-enter-active 中进行设置。同理，当元素从 DOM 中移除或者动态被设置为 v-if 为 false 的时候，需要从 opacity: 1 变为 opacity: 0 的过程，此过程需要在 .fade-leave-active 中进行设置。
注意事项
和第一次渲染过程不同，动画效果需要在组件已经被添加到 DOM 中后才会生效。如果初始时就希望元素能够进行动画效果，可以通过在 transition 组件上添加 appear 属性为 true，来触发元素的初始渲染过程。
套用 transition 组件的元素只要进行属性的控制（如 v-if）的变化，就能够触发相应的过渡动画效果。
可以通过在 transition 组件上添加 mode 属性，来改变动画的显示效果。mode 属性默认为 in-out，即元素进入和离开时会进行动画显示，还可以设置为 out-in 或者同时兼容两种模式。
过渡动画的生命周期
transition 动画包含多个生命周期钩子函数，我们可以在不同的生命周期钩子中实现不同的动画效果。
进入时的钩子函数
- beforeEnter(el)
在元素插入到 DOM 中之前调用。此钩子函数中的 el 表示需要插入的元素。
- enter(el, done)
在元素插入到 DOM 中之后调用，此函数中的 done 表示动画效果已经结束。
- afterEnter(el)
在元素插入到 DOM 中之后调用。
- enterCancelled(el)
在动画效果被取消后调用。
离开时的钩子函数
- beforeLeave(el)
在元素从 DOM 中移出之前调用。
- leave(el, done)
在元素从 DOM 中移出之后调用，此函数中的 done 表示动画效果已经结束。
- afterLeave(el)
在元素从 DOM 中移出之后调用。
- leaveCancelled(el)
在动画效果被取消后调用。
transition-group 组件
transition-group 组件是 Vue.js 提供的一种用于列表动画的方式，其实现原理类似于 transition 组件。在使用 transition-group 组件时，需要给每个子元素加上 key 属性，这样可以使得 Vue.js 能够追踪列表中各个元素的变动情况。
使用示例
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item }}
</li>
</transition-group>- name 属性表示列表项的动画效果名称。
- tag 属性表示列表元素的 HTML 标签，默认为 span。
- v-for 属性表示列表中的内容。
- key 属性表示列表项的唯一标识符。
注意事项
如果要同时为每个子元素指定不同的过渡效果，可以使用动态的 name 属性。
transition-group 组件也提供了和 transition 组件类似的生命周期钩子。
总结
transition 动画是一种在 Vue.js 中实现动画效果的方式，其生命周期包括进入、离开和列表进入、离开时的动画效果。在使用过程中，需要注意过度动画的设置和钩子函数的实现。除此之外，transition-group 组件也提供了一种用于列表动画的方式。通过对 Vue.js 中 transition 动画的学习，我们可以更好地实现动态网页效果的展示和实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647144d2968c7c53b0f2cd4b