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

Answer 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>