Transition bug wit transition hack

by nkovacs

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<button type="button" @click="component = 'component-a'">
Component A
</button>
<button type="button" @click="component = 'component-b'">
Component B
</button>
<button type="button" @click="instantSwitch">
Instant Switch
</button>
<component :is="component" transition="page" transition-mode="out-in"></component>

SCSS

.page-transition {
	//transition: all .5s ease;
	transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.page-enter {
	transform: translateY(20px);
	opacity: 0;
	box-shadow: none;
}

.page-leave {
	transform: translateY(20px);
	opacity: 0;
	box-shadow: none;
}

JavaScript

var pageTransition = {
	beforeEnter: function(el) {
		console.log('animation beforeenter');
	},
	enter: function(el) {
		console.log('animation enter');
	},
	afterEnter: function(el) {
		console.log('animation afterenter');
	},
	enterCancelled: function(el) {
		console.log('enter cancelled');
	},

	beforeLeave: function(el) {
		console.log('animation beforeleave');
	},
	leave: function(el) {
		console.log('leave');
	},
	afterLeave: function(el) {
		console.log('animation afterleave');
	},
	leaveCancelled: function(el) {
		console.log('leave cancelled');
	}
};

Vue.transition('page', pageTransition);

var componentA = {
    template: "<p>I'm Component A</p>",
    data: function() {
    	return {
            test: 'test'
		};
	}
};

var componentB = {
    template: "<p>I'm Component B</p>",
    data: function() {
    	return {
            test: 'test'
		};
	}
};

Vue.component('component-a', componentA);
Vue.component('component-b', componentB);

new Vue({
    el: 'body',
    data: {
    	component: null
    },
    created: function() {
    	this.$nextTick(function() {
        this.component = 'component-a';
      })
    },
    methods: {
    	instantSwitch: function() {
      	this.component = 'component-b';
        this.$nextTick(function() {
        	this.component = 'component-a';
        })
      }
    }
})