It seems like the router setup for the JSS Vue example may be preventing the transitions that are built into Vue Router from properly running. Specifically I am having issues with the leave animation. It seems like it either gets skips or the enter state runs too quickly. The enter animation works fine and I have also used this before on more simple Vue app builds.
This is the code I added to AppRoot.vue
<template>
<div class="app-root">
<context-view :visible="contextViewVisible" />
<!-- 'router-view' is a "global" component that is injected into the Vue component registry by vue-router. -->
<transition name="slide-fade">
<router-view v-if="!languageIsChanging" />
</transition>
<div v-if="languageIsChanging" class="alert alert-info">Language is changing...</div>
</div>
</template>
As well as the CSS for the transition animations:
.slide-fade-enter-active {
transition: all 0.5s ease;
transition-delay: 2s;
}
.slide-fade-leave-active {
transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
transform: translateX(30px);
opacity: 0;
}
My guess is that it has something to do with how the dynamic routes are being fetched and the logic in RouteHandler.vue
. I'm wondering if there are any other more simple examples of route handling that only deal with fetching the right components and mounting them with the data from SiteCore (no language switcher and graphQL stuff).
Any help is appreciated!