el-tab 切换时添加动画_el-tabs 切换动画

需求：在点击切换页面的时候添加动画

解决：

用的是 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>