Использование библиотеки animate. css для переходов по пустым страницам

Question

Я пытаюсь использовать библиотеку animate. css для передачи текстовых страниц, но, похоже, она не работает. Я добавил анимацию. css в nuxt.config. js и загрузил в порядке. Но при попытке использовать одно из имен переходов ничего не происходит. Попытка:

transition: 'bounceInUp'

, а также:

transition: {name:'bounceInUp',type:'animation'}

без анимаций (или ошибок) при загрузке страницы.

РЕДАКТИРОВАТЬ: Попытка добавления в пользовательских активных классах. Все еще ничего.

Полный код страницы:

<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

Вам необходимо определить классы -enter-active и -leave-active для одного и того же имени анимации в CSS. Такие как:

. bounceInUp-enter-active {
  animation: bounceInUp .8s;
}
. bounceInUp-leave-active {
  animation: bounceInUp .5s;
}