【问题标题】：Nuxt.js transition not workingNuxt.js 过渡不起作用
【发布时间】：2018-06-27 09:04:17
【问题描述】：

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

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

pages/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'
}

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案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>

【讨论】：