Using animate.css library for nuxt page transitions - css

Question

I am trying to use the animate.css library for nuxt page transtions but it doesnt seem to be working. I added the animate.css to the nuxt.config.js and loads in fine. But when try to use one of the transition names, nothing happens.
Tried:
transition: 'bounceInUp'
and also:
transition: {name:'bounceInUp',type:'animation'}
no animations (or errors) on page load by either.
EDIT:
Tried adding in custom active classes. Still nothing.
Full Page Code:
<template>
<v-layout>
<v-flex class="text-center">
<blockquote class="blockquote">
Testing amination page
</blockquote>
</v-flex>
</v-layout>
</template>
<script>
export default {
transition: {name:'bc',type:'animation'}
}
</script>
<style>
.bc-enter-active {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp
}
.bc-leave-active {
-webkit-animation-name: bounceInUp;
animation-name: bounceOutUp
}
</style>

Answer 1

Provided you already have animate.css installed.
nuxt.config.js
css: ['animate.css/animate.compat.css'],
Vue file. Just a minor tweak with what you already have.
<script>
export default {
transition: {name:'bc'}
}
</script>
<style>
.bc-enter-active {
animation: bounceInUp 5s;
}
.bc-leave-active {
animation: bounceOutUp 5s;
}
</style>
This helped me.

Answer 2

You'd need to define -enter-active and -leave-active classes for the same animation name in CSS. Such as:
. bounceInUp-enter-active {
animation: bounceInUp .8s;
}
. bounceInUp-leave-active {
animation: bounceInUp .5s;
}