Transition bug with 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="nextTickSwitch">
nextTick Switch
</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, .page-leave {
	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, done) {
		console.log('animation enter');
    
    var onEnd = function(e) {
      el.removeEventListener(Vue.util.transitionEndEvent, onEnd);
      console.log('enter done');
      done();
    };

    el.addEventListener(Vue.util.transitionEndEvent, onEnd);
	}
};

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: {
      nextTickSwitch: function() {
        this.component = 'component-b';
        this.$nextTick(function() {
        	this.component = 'component-a';
        });
      },
    	instantSwitch: function() {
        var that = this;
      	that.component = 'component-b';
        setTimeout(function() {
          that.component = 'component-a';
        }, 0);
      }
    }
})