Vue07---vue中的css动画原理及animate.css使用

 

目录

一、transition过渡动画原理

 二、使用keyframes关键帧

 三、在vue中使用animate.css

 同时使用过渡和动画

---

一、transition过渡动画原理

当元素被transition标签包裹之后，vue会自动分析被包裹的元素的css样式，然后构建一个动画的流程。

在动画开始执行的瞬间会往div标签上增加两个样式：fade-enter、fade-enter-active,当动画第一帧结束开始第二帧的时候，会移除fade-enter样式，同时加上fade-enter-to样式。在动画执行的最后会将fade-enter-active和fade-enter-to都移除。

tip:

transition上的name是起了个名字，不加name属性后续的vue增加的样式就是v-enter和v-enter-active

在动画隐藏的过程中原理如下：

流程和上诉显示过程一样

 

代码例子如下

效果：

 二、使用keyframes关键帧

//也可以使用from to 相当于0%-100%
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

效果

 三、在vue中使用animate.css

首先使用npm安装animate.css

npm install animate.css --save

 然后在mian.js里引入

import animate from 'animate.css' 
Vue.use(animate)

代码如下：animated 类似于全局变量，它定义了动画的持续时间,默认1s；swing是动画具体的动画效果的名称，你可以选择任意的效果。具体效果可查看官网文档animate.css动画演示_dowebok

必须使用enter-active-class和leave-active-class

            
hello world

效果：

 同时使用过渡和动画

在enter-active-class后加入自定义的过渡动画

            
hello world