Transition working half of the time
Hello. I’m reworking my final project from a VueJS course on Udemy into using Quasar. I had it working 100% as a regular Vue project using Bootstrap and Animate.css. In Quasar, I’ve gotten the functionality to all work, like routes, data storage to Firebase, my methods, etc. I have a few things left I’m checking into which are all cosmetic.
My default.vue layout file has this:
<transition appear enter-active-class=“animated fadeInUp” leave-active-class=“animated fadeOutDown” mode=“out-in” class=“animate-fade”>
The q-page element is not on my pages because the animation was rolling up the whole page, making the scroll bar go crazy. My page files have DIVs instead.
Anyway, I have index.vue, portfolio.vue, and stocks.vue pages. The portfolio page alternately displays two items, as shown below with the v-if:
<template v-if=“portfolio.length > 0”>
<app-holding v-for=“holding in portfolio” :holding=“holding” :key=“holding.name”></app-holding>
<template v-if=“portfolio.length === 0”>
<div class=“panel panel-default”>
<h4 class=“text-weight-bold”>You haven’t purchased any stocks yet!</h4>
<p class=“q-body-1”>Click the Stocks menu item to view stocks.</p>
When portfolio.length === 0, let’s call this porfolio1, the animation works just as expected (fadeOutDown and fadeInUp). Otherwise, the index.vue does a fadeOutDown, but then portfolio.vue fades in, in place, without a slide up. Let’s call this portfolio2, where portfolio.length > 0.
Lastly, I have a stocks.vue page with a template like this:
<app-stock v-for=“company in companies” :company=“company” :key=“company.name”></app-stock>
When leaving or entering either the stocks page or the portfolio2 page, the animation is just a simple fade in/out. Only when going back and forth from index to portfolio1 are the transitions correct.
The transition matrix goes like this:
index->portfolio1 = correct
index->portfolio2 = wrong
index->stocks = wrong
porfolio1->index = correct
portfolio1->stocks = wrong
portfolio2->index = wrong
portfolio2->stocks = wrong
stocks->index = wrong
stocks->portfolio1 = wrong
stocks->portfolio2 = wrong
This all worked prior to wrapping things in Q elements instead of DIVs. Is something overriding the transition somewhere?
I have tried changing the transition to this, with no effect:
<transition enter-active-class=“animated fadeInUp” leave-active-class=“animated fadeOutDown” mode=“out-in”>