vue transition with animate.css not working as expected with fadeInUp - vuejs2

Question

For some reason animate.css is not working exactly how I expected it to.
I have this component:
<transition
appear
enter-active-class="animated fadeInUp"
leave-active-class="animated fadeOutDown"
mode="out-in"
>
<span
:key="rotateindex"
:style="{ color: rotatingText[rotateindex].colour }"
>
{{ rotatingText[rotateindex].title }}
</span>
</transition>
The list of text that is rotation is just this:
[
{
"title":"Test 1",
"colour":"#00FFFF"
},
{
"title":"Test 2",
"colour":"#0000FF"
},
{
"title":"Test 3",
"colour":"#FF00FF"
}
]
In my code, I do this:
const textRotate = () => {
rotateindex.value = rotateindex.value + 1;
const index = rotateindex.value;
const text = rotatingText.value;
console.log("text to rotate", text, text.length);
if (index >= text.length) {
rotateindex.value = 0;
}
// Show current Index - For Debug
console.log(rotateindex.value);
console.log(text[rotateindex.value]);
console.log(text[rotateindex.value].title);
};
const startAnimation = () => {
setInterval(() => {
textRotate();
}, 2000);
};
watch(
rotatingText,
(text) => {
if (!text) return;
console.log("text", text);
startAnimation(); // Start the animation
},
{
immediate: true,
}
);
And my text starts animating, the only issue is that it doesn't fadeInUp or fadeOutDown, instead it just fades in and out (opacity only).
Does anyone know how I can get it to move vertically too?