动画.一些动画不工作

Question

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

可以工作的动画:bounceIn，bounceOut和hinge。

我试着在相互依赖的情况下做这件事。在我的电脑上也试了一下，结果是一样的。

下面是我要创建动画的元素的代码:

/* ... */
<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!',
}
// ...

codependency .io上的代码

Answer 1

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

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