本文介绍了如何在Vue中使用CSS过渡和animate.css动画库来创建过渡和动画效果。详细阐述了Vue的过渡动画原理，包括v-enter、v-enter-active、v-enter-to等类的切换，并展示了如何定义和调用公共动画名。最后，讲解了如何结合animate.css，通过自定义enter-active-class和leave-active-class属性实现动态效果，以提高开发效率。
前言
- Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
过渡动画原理
- 在进入/离开的过渡中，会有 6 个 class 切换：
- v-enter（插入）类原理—动画流程概念图
- v-enter第一帧加入，第二帧移除；v-enter-active第一帧加入、贯穿整个过程结尾移除；v-enter-to第二帧加入、贯穿整个过程结尾移除
- v-leave（移除）类原理—动画流程概念图：
- 同理：第一帧(增加v-leave和v-leave-active)、第二帧(移除v-leave、增加v-leave-to)，最后一帧(移除v-leave-active和v-leave-to)
最低0.47元/天 解锁文章
扫一扫
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
