使用 animate.css 库进行 nuxt 页面转换答案

【问题标题】：Using animate.css library for nuxt page transitions使用 animate.css 库进行 nuxt 页面转换
【发布时间】：2020-05-08 23:14:32
【问题描述】：

我正在尝试使用 animate.css 库进行 nuxt 页面转换，但它似乎不起作用。我将 animate.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>

【问题讨论】：

标签： css vue.js nuxt.js

【解决方案1】：

您需要在 CSS 中为相同的动画名称定义 -enter-active 和 -leave-active 类。如：

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

【讨论】：

那么就没有办法在nuxt中使用animate.css库进行页面动画了吗？为什么我不能使用关键帧？常规的 vuejs 过渡允许关键帧
使用自定义活动类进行编辑后仍然一无所获

【解决方案2】：

前提是你已经安装了 animate.css。

nuxt.config.js

css: ['animate.css/animate.compat.css'],

Vue 文件。只需对您已有的内容进行微调即可。

<script>
  export default {
    transition: {name:'bc'}
  }
</script>
<style>
.bc-enter-active {
    animation: bounceInUp 5s;
}
.bc-leave-active {
    animation: bounceOutUp 5s;
}
</style>

This 帮助了我。

【讨论】：