Animate.css - 一些动画不起作用

问题描述

我正在尝试使用 Vue.js 和 Animate.css 进行动态转换，但有些动画不起作用！

有效的动画：bounceIn、bounceOut 和 hinge。

我正在尝试在 codepen.io 上执行此操作，但也在我的 PC 上进行了尝试并得到了相同的结果。

这是我要制作动画的元素的代码：

/* ... */
<transition
  name="custom-transition"
  mode="out-in"
  :enter-active-class="'animate_animated ' + enterClass"
  :leave-active-class="'animate_animated ' + leaveClass"
>
  <h1 v-if="show" :key="value">
    {{ value }}
  </h1>
</transition>
/* ... */

enterClass 和 leaveClass 的值取自此处：

// ...
data: {
  show: true,enterClass: 'animate__bounceIn',enteranimations: [
    'animate__backInDown','animate__bounceIn','animate__fadeIn','animate__lightSpeedInRight','animate__rotateIn','animate__jackInTheBox','animate__rollIn','animate__zoomIn','animate__slideInDown',],leaveClass: 'animate__bounceOut',leaveAnimations: [
    'animate__backOutDown','animate__bounceOut','animate__fadeOut','animate__lightSpeedOutLeft','animate__rotateOut','animate__hinge','animate__rollOut','animate__zoomOut','animate__slideOutDown',value: 'Hi!',}
// ...

Code on codepen.io

解决方法

好吧，愚蠢的错误..我忘记了类名animate__animated中的第二个下划线

<transition
  name="custom-transition"
  mode="out-in"
  :enter-active-class="'animate__animated ' + enterClass"
  :leave-active-class="'animate__animated ' + leaveClass"
>
  /*...*/
</transition>