Nuxt.js 过渡不起作用

Question

逻辑：我有一个 pages/account.vue 包含两个子组件 components/beforeLogin 和 components/afterLogin。 子组件包含在 pages/account.vue 中的条件博客内通过结果完成，该结果是字符串，比如说“x”存储在本地存储中并由服务器存储。

问题：为什么转换不起作用，因为我已经满足了 nuxt.js 转换属性工作的条件？ 如果不是，请告诉我！

页面/account.vue：

<template>
<main>
<!-- check if user is logged in or not -->
<transition name="pulse">
  <div v-if="isUserLoggedIn">
    <!-- mrBoB search start -->
    <x-after-login-about></x-after-login-about>
    <!-- mrBoB search end -->
  </div>

  <!-- else route user to account login page -->
  <div v-else>
    <!-- mrBoB search start -->
    <x-before-login-about></x-before-login-about>
    <!-- mrBoB search end -->
  </div>
</transition>

组件/登录前

<template>
 <transition name="bounceIn">
  <h1>login and registration form</h1>
 </transition>
</template>

<script>
/*
 COMPONENT IMPORTS.
*/
export default {
 name: 'before-login'
}

组件/登录后

<template>
 <transition name="bounceIn">
  <h1>profile</h1>
 </transition>
</template>

<script>
/*
 COMPONENT IMPORTS.
*/
export default {
 name: 'after-login'
}

Answer 1

您还必须为过渡定义 css。

您可以在这里查看VueJS 和 NuxtJS 中的所有转换

例子：

<template>
  <transition name="fade">
    <p>hello</p>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>