如何使用vue过度效果与动画transition

这篇文章主要介绍"如何使用vue过度效果与动画transition"，在日常操作中，相信很多人在如何使用vue过度效果与动画transition问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"如何使用vue过度效果与动画transition"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

目录

• transition钩子函数

• 自定义过渡类名

• transition-group使用

• 小结

先看一个示例

代码如下

包裹了一个div组件，点击按钮实现动画效果。一般搭配v-if、v-show、动态组件、组件根节点来使用。

transition钩子函数

transition提供六个钩子函数，提供给我们在不同时机编写相应的动画效果。以下是此六个钩子函数执行时机

1.v-enter：进入过渡开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2.v-enter-active：进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3.v-enter-to:进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4.v-leave: 离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5.v-leave-active：离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6.v-leave-to:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除

自定义过渡类名

在页面中有多个地方需要进行过渡效果，如果使用vue提供的默认那6个钩子函数，那么所有要过渡地方的过渡效果都是一样的。如果需要在不同的场合定义不同的动画效果，就需要我们自己定义专属于各个过渡效果的类名。解决办法给transition标签添加name属性，在name属性中写入自己的类名前缀。例如，那么在使用类名的时候就是这样的：.my-trans-leave、.my-trans-enter-to。如：

style写法，my-trans是".my-trans-enter-active"的前缀

transition-group使用

对列表进行过渡渲染时，就必须使用transition-group元素包裹。点击列表中内容，按照以下动画移除，示例如下

小结

过度与动画，使用transition标签完成，同时提供6个钩子函数。全局动画在app.vue中，在router-view组件中包裹transition，如：；给transition标签添加name属性定义过渡类名，实现局部变化。

到此，关于"如何使用vue过度效果与动画transition"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！