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:

    <q-page-container>
    <q-page padding>
    <transition appear enter-active-class=“animated fadeInUp” leave-active-class=“animated fadeOutDown” mode=“out-in” class=“animate-fade”>
    <router-view></router-view>
    </transition>
    </q-page>
    </q-page-container>

    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>
    <div>
    <template v-if=“portfolio.length > 0”>
    <app-holding v-for=“holding in portfolio” :holding=“holding” :key=“holding.name”></app-holding>
    </template>
    <template v-if=“portfolio.length === 0”>
    <div class=“panel panel-default”>
    <div class=“panel-body”>
    <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>
    </div>
    </div>
    </template>
    </div>
    </template>

    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:

    <template>
    <div>
    <app-stock v-for=“company in companies” :company=“company” :key=“company.name”></app-stock>
    </div>
    </template>

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

    Any ideas?