需求：在點擊切換頁面的時候添加動畫

解決：

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