CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
J.Doe
J.Doe

Reputation: 541

Nuxt.js transition not working

LOGIC: i have one pages/account.vue containing two child components components/beforeLogin and components/afterLogin. child component include is done inside conditional blog in pages/account.vue through result which is string let say 'x' stored in localstorage and was stored by server.

QUESTION: why transition is not working as i already fullfilled condition for nuxt.js transition property to work? if not than let me know!

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>

components/beforeLogin

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

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

components/afterLogin

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

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

Upvotes: 2

Views: 7972

Answers (1)

KitKit
KitKit

Reputation: 9583

You have to define css for transition also.

You can take a look all transition in VueJS and NuxtJS here

Example:

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

Upvotes: 4

Related Questions