Using animate.css library for nuxt page transitions

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>

mrkvn · Accepted Answer · 2021-05-13 16:47:18Z

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.

answered May 13, 2021 at 16:47

mrkvn

861 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

runofthemillgeek · Accepted Answer · 2020-01-22 18:26:52Z

0

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;
}

answered Jan 22, 2020 at 18:26

runofthemillgeek

1,2421 gold badge12 silver badges21 bronze badges

2 Comments

Eli Per Over a year ago

So there would be no way to use the animate.css library for page animations in nuxt? Why cant i use keyframes? Regular vuejs transitions allow keyframes

Eli Per Over a year ago

Edited with custom active classes still nothing

Collectives™ on Stack Overflow

Using animate.css library for nuxt page transitions

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related