Gilbert Nwaiwu Gilbert Nwaiwu - 16 days ago 11
CSS Question

VueJS: Complete dynamic component transition before rendering new component

I have some components that i swap out using VueJs's dynamic component option. I set up transitions on the dynamic component. My issue is as follows:
-Currently, if a change the current view(or component) the transition effect starts(the leave transition)
-As soon as the transition effect begins the next view/component starts its own transition. In essence, both transitions occur simultaneously. What i want is for the (leave) transition for the first component to complete before the (enter) transition for the new component begins.

<template>
<div id="app">
<div>Current page: {{currentView}}</div>
<img src="./assets/logo.png">
<transition name="fade">
<component @stateCPchanged="changeView" v-bind:is="currentView"></component>
</transition>
</div>
</template>

<script>
import numberPage from './components/NumberPage.vue'
import otpPage from './components/OtpPage.vue'
import redirectPage from './components/RedirectPage.vue'
import state from './state.js'
export default {
data () {
return {
currentView: state.currentPage
}
},
components: {
numberPage: numberPage,
otpPage: otpPage,
redirectPage: redirectPage
},
methods: {
changeView() {
this.currentView = state.currentPage
}
}
}
</script>

<style>
.fade-enter-active {
transition: all 0.4s
}
.fade-enter {
opacity: 0;
margin-left: 90px;
}
.fade-leave-active {
transition: all 0.4s;
opacity: 0;
margin-left: -100px;
}
</style>

Answer

mode="out-in" should be what you want.