VUE3 Animate Css实现动画过渡

Vue3 项目中使用Animate Css 实现动画过渡

首先引入animate css 到项目中，这里不多赘述。
主要在transition 标签中使用animate CSS 实现动画过渡的时候发现，不是进入动画失效就是退出动画失效，再或者会出现闪现的情况。
经过多种方法，发现以下亲测有效。
先添加两个Class 分别对应进入动画和退出动画，根据自身项目要求对animate css 的属性进行设置.

.showCamera {
  animation: backInLeft;
  animation-duration: 1.5s;
}
.hideCamera {
  animation: backOutLeft;
  animation-duration: 1.5s;
}

使用vue 内置的transition 来包裹需要拥有动画效果的元素

<transition appear enter-active-class="showCamera" leave-active-class="hideCamera">
      <div
        v-show="selectCameraFlag"
        ref="selectCamera"
        class="select-camera"
        @click="cameraFlag = !cameraFlag"
      >
        {{ t('vip.selectCamera') }}
      </div>
    </transition>

在enter-active-class,leave-active-class分别附上之前定义的class 类，如上图所示