vue如何使用原生js写动画效果_Vue.js - Transition过渡动画的使用1（使用CSS过渡或动画）...

一、基本介绍

1， 组件

(1)如果某个元素或者组件需要使用过渡动画效果，只需使用 vue提供的 组件将其包裹起来封装成过渡组件。

(2)Vue只有在插入，更新或者移除 DOM元素时才会应用过渡效果，例如：

v-if(条件渲染)

v-show(条件展示)

动态组件

在组件的根节点上，并且被 vue实例 DOM方法触发。比如使用 appendTo方法把组件添加到某个根节点上

2，过渡效果实现方式

过渡效果具体的实现方式分为如下两种：

利用 CSS过渡或者动画来实现

利用 JavaScript钩子函数来实现

3，动画执行逻辑

封装成过渡组件的元素被插入或者删除时，vue将会做如下事情：

首先查找目标元素是否有 CSS过渡或者动画，如果有就在适当的时候进行处理。

如果过渡组件设置了 JavaScript钩子函数，vue会在相应阶段调用钩子函数。

如果以上两者都没有，DOM操作(插入或者删除)就在下一帧立即执行。

二、结合 CSS 实现动画效果

1，基本用法

(1)我们给 transition的 name属性设置一个值(比如：name="xxx")，那么在组件过渡过程中，会有如下六个 CSS类名进行切换：

xxx-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。

xxx-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过