Animate.css

Question

我正在尝试使用 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

Answer 1

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

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

Animate.css - 一些动画不工作

Animate.css - Some animations not working

javascript

css

vue.js