ElementUI过渡动画篇

ElementUI过渡动画篇

element官方提供的过渡动画并不能很好的满足使用。我尝试过几种过渡动画的设置方式，最终选择了Animate.css。

一、使用方法？

引入

引入：

npm install animate.css --save

然后在mian.js中引入：

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

二、使用

首先后面中css中使用的animation-name属性是过渡动画名，可以移步 https://www.dowebok.com/demo/2014/98/ 查看

使用时有以下三种情况

1、整页使用，例如在切换路由的时候使用。

推荐使用css的写法，否则页面写的不好，会出现很多问题。
先给路由一个class

<router-view class="card-box"></router-view>

然后css里这样，就可以了。

.card-box{
      height: 98%;
       animation-name:pulse ; 
    animation-duration: 1s; 
}

2、按钮点击使用。

首先，按钮点击事件

 <el-button click="ClickLogin(index)">

然后给需要有过渡动画的盒子加上这个

 <div  :class="{'active':currentSort==index}">

给active一个样式

 .active1{
    animation-name:flipOutX ; 
    animation-duration: 2s; 
 }

点击后触发事件

 ClickLogin(index){
 this.currentSort=index;
 }

这样完成了

3、直接在盒子里实现，（并不是很推荐）。

给他一个class,animate__animated animate__（），括号里接动画名即可

 <div  class="animate__animated animate__flash">