Nuxt.js过渡不起作用

Question

逻辑：我有一个页面/ account.vue包含两个子组件组件/ beforeLogin和components / afterLogin。子组件包括在pages / account.vue中的条件博客内完成，结果是字符串，例如＆＃39; x＆＃39;存储在localstorage中并由服务器存储。

问题：为什么过渡不起作用，因为我已经满足了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>

的组件/ beforeLogin

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

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

的组件/ afterLogin

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

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

Answer 1

您还必须为转换定义css。

您可以查看VueJS和NuxtJS here

中的所有转换

示例：

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