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>