如何解决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!',}
// ...
解决方法
好吧,愚蠢的错误..我忘记了类名animate__animated
中的第二个下划线
<transition
name="custom-transition"
mode="out-in"
:enter-active-class="'animate__animated ' + enterClass"
:leave-active-class="'animate__animated ' + leaveClass"
>
/*...*/
</transition>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。