（十五）vue之过渡&动画

lw_1994

于 2018-11-13 21:21:51 发布

阅读量457

点赞数

分类专栏： vue 文章标签： vue vue过渡&动画

本文链接：https://blog.youkuaiyun.com/lw_1994/article/details/84036519

版权

本文详细介绍了Vue中的过渡效果，包括CSS过渡实例和CSS动画。通过介绍过渡的适用条件、过渡流程、过渡类名及其作用，展示了如何在Vue中实现元素的插入、更新、移除时的过渡效果。同时提到了JavaScript钩子方法，这些钩子可以在CSS过渡/动画基础上增强控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 在插入、更新或者移除 DOM 时，我们能实现这之间转换的过渡效果。
然后这些过渡效果是在dom操作（插入、删除）正式应用之前执行。
注意：更新就等于重新插入的操作。

实现方式

1.使用vue内置的class类名,我们直接在当前类下写样式。
2.在过渡钩子函数中使用 JavaScript 直接操作 DOM
3.可以配合使用第三方 CSS/JS 动画库,如 Animate.css,JavaScript ,Velocity.js

1.适用条件

通过如下方式实现对DOM的插入、更新，移除，隐藏等操作时

 1. 条件渲染 (使用 v-if) 
 2. 条件展示 (使用 v-show) 
 3. 动态组件 
 4. 组件根节点

2.采取vue提供的类名实现过渡

当通过vue实现元素插入、更新、移除、隐藏时，在这些操作正式执行前，vue提供了6 个 class 用于实现过渡的效果，其中每个类名代表了dom在正式插入或者删除【隐藏/显示】前的不同过渡时刻。
（注意：过渡效果是发生在这些操作正式执行前的）

V-enter     ,      v-enter-active       ,    v-enter-to
V-leave     ,      v-leave-active       ,    v-leave-to