VUE3 Animate Css实现动画过渡

最新推荐文章于 2025-02-14 18:18:07 发布

原创最新推荐文章于 2025-02-14 18:18:07 发布 · 916 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue.js #javascript

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Vue3项目中如何解决使用AnimateCss进行动画过渡时遇到的问题，如进入动画失效、退出动画失效或元素闪现。通过为不同的动画状态定义专门的Class，如.showCamera和.hideCamera，并在transition标签中使用这两个Class，可以实现平滑的动画效果。文章提供了一个具体的代码示例，展示了如何在Vue3组件中应用这些设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>