elementui 通过事件触发动画

提示：继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 赋值）