vue中实现过渡动画

vue中实现过渡动画

使用背景:

1. Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：
   1. 在 CSS 过渡和动画中自动应用class
   2. 可以配合使用第三方 CSS 动画库，如 Animate.css
2. Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
   1. 条件渲染 (使用v-if)
   2. 条件展示 (使用v-show)
3. 当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
   1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名

步骤

1. 为元素添加v-if或者v-show
2. 必须将需要添加过渡动画的元素包裹在transition标签中
3. 为六个时机设置自定义动画样式:
   1. 如果是使用自定义样式时为transition设置名name，那么这个name属性的值就是后期类样式的前缀

动画执行的六个时机

v-enter:开始进入
v-enter-active:进入中的过程
v-enter-to:进入完毕
v-leave:准备离开
v-leave-active:离开的过程
v-leave-to:离开完毕

使用样式类名(第三方css库)实现过渡动画

第三方动画库使用介绍

1. Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库
2. 下载npm install animate.css --save
3. 引入import 'animate.css'
4. 使用
   1. 为元素设置class,根据需要指定动画样式名称
   2. 只需要将该类animate__animated以及任何动画名称添加到元素中（不要忘记animate__前缀！ 最新animate.css规定）
   3. 具体动画名称可查看文档animate.css

步骤

1. 为元素添加v-if或者v-show
2. 必须将需要添加过渡动画的元素包裹在transition标签中
3. 为六个时机设置自定义动画类名，主要考虑enter-active-class和leave-active-class

动画执行的六个时机的类名

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class