需求:在点击切换页面的时候添加动画
解决:
用的是 Animate.css
1.安装依赖
npm install animate.css --save
2.在main.js里面引入
import 'animate.css';
3. 在页面中使用
第一步:类名
因为我是在点击title的时候切换页面,所以我要引用的这个页面上写类名,如下:
第二步:写样式
<template>
<div class="userGuanli" animated>
<el-tabs v-model="activeName" class="tabsStyle">
<el-tab-pane
style="height: 100%; width: 100%"
label="用户维护"
name="first"
><userindex class="cs02" />
</el-tab-pane>
<el-tab-pane
style="height: 100%; width: 100%"
label="信息维护"
name="second"
>
<EquipIndex class="cs02" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<style>
.el-tabs__active-bar {
width: 0 !important; //取消下划线
}
/**添加切换动画 */
.cs02 {
animation: fadeInLeft 1s 0.02s ease backwards;
/*解释:
* fadeInleft 是引用插件中的一个动画名称
* 1s 是点击时,这个动画整体使用的时间
* 0.02s 是动画刚开始显示需要的时间
* ease 是动画开始的方向
* backwards 有啥效果,鄙人目前还没看出来,百度查的说是“规定对象动画时间之外的状态”
*/
}
</style>