LOGIC: The pages/account.vue file consists of two child components, components/beforeLogin and components/afterLogin. The inclusion of child components is based on a conditional check within pages/account.vue using a string result ('x') stored in localStorage by the server.
QUESTION: Why is the transition not working even though all conditions for the nuxt.js transition property have been met? If not, please provide guidance!
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'
}