Animate.css - Some animations not working

Question

I'm trying to make dynamic transitions with Vue.js and Animate.css but some animations not working!

Animations that work: bounceIn, bounceOut and hinge.

I'm trying to do this on codepen.io but also tried on my PC and got the same.

Here is the code of the element I am trying to animate:

/* ... */
<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>
/* ... */

Values for enterClass and leaveClass are taken from here:

// ...
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

Hm, can you try removing the v-show and adding the classes that slow down the animation? — SRR
– SRR, Commented Jan 17, 2021 at 11:55

ShviX · Accepted Answer · 2021-01-18 08:16:52Z

1

Okay, stupid mistake.. I just forgot the second underscore in class name animate__animated

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

answered Jan 18, 2021 at 8:16

ShviX

311 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Animate.css - Some animations not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related