Seeking to achieve fluid transitions using Vue.js and Animate.css, encountering issues with certain animations not functioning as expected!
Successfully implementing animations such as: bounceIn, bounceOut, and hinge.
Experimenting with this on codepen.io, also attempted locally with identical results.
Below is the element code undergoing animation:
/* ... */
<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 derived from the following:
// ...
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!',
}
// ...