Gilbert Nwaiwu Gilbert Nwaiwu - 10 months ago 139
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.

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

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

.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;

Answer Source

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