I've been working on implementing the animate.css library for nuxt page transitions, but I'm encountering some issues. I have successfully added animate.css to the nuxt.config.js file and it loads without any problems. However, when I try to use one of the transition names, nothing seems to happen. I've attempted:
transition: 'bounceInUp'
as well as:
transition: {name:'bounceInUp',type:'animation'}
Unfortunately, neither of these options result in any animations (or errors) on page load.
UPDATE: I also tried incorporating custom active classes with no success.
Here is the full code for the page:
<template>
<v-layout>
<v-flex class="text-center">
<blockquote class="blockquote">
Testing animation 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>