提示：繼el-tab 切換時添加動畫_CMDN哈哈哈哈哈的博客-CSDN博客之后。

目錄

1. 需求：

2.?解決方法：

1.?先寫動畫樣式

?2.? 設類名

?3.?在data?里面定義inAnimation?

?4.?在methods?寫方法

1. 需求：

點擊按鈕，在跳轉路由之前，先觸發動畫，動畫完成之后移除樣式

2.?解決方法：

1.?先寫動畫樣式

? ?之所以吧anim和gzindex寫在一起，是為了切換動畫時頁面有樣式。

//頁面一進來加載
.GZindex,.Anim {
  animation: zoomIn 1.5s 0.02s ease backwards;
  background: url("../../assets/imgList/GZIndexBG.jpg") no-repeat;
  height: 100%;
  background-position: center;
  width: 100%;
  background-size: 100% 100%;
  position: fixed;
}

//觸發事件后加載
.Anim {
  animation: zoomOut 1.5s 0.02s ease backwards;
  /* animate__zoomOut */
}

?2.? 設類名

gzindex ：頁面樣式

anim:?動畫?

想法：通過判斷inAnimation來決定是觸發哪個類

?3.?在data?里面定義inAnimation?

export default {
    name: 'GZIndex',
    data () {
      return {
        inAnimation:true
      }
    }
}

?4.?在methods?寫方法

在需要觸發動畫的事件中給inAnimation賦值即可

（點擊按鈕，調用方法，在方法里給inAnimation?賦值）