JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<a href="#" v-on="click: race">Click me</a>

<section id="main">
    <component is="{{currentView}}" v-transition="page" transition-mode="out-in"></component>
</section>

CSS

.page-transition {
    transition: all .5s ease;
}
.page-enter, .page-leave {
    opacity: 0;
}

JavaScript

Vue.config.debug = true;

Vue.transition('page', {
    enter: function (el, done) {
        setTimeout(function() {done();}, 500);
    },
    leave: function (el, done) {
        if (getComputedStyle(el).opacity == 0) {
            done()
        } else {
            setTimeout(function() {done();}, 500);
        }
    }
});

new Vue({
    el: 'body',
    data: {
        currentView: null
    },
    methods: {
        race: function () {
            this.currentView = 'one';
            this.$nextTick(function () {
                this.currentView = 'two';
            });
        }
    }
})

Vue.component('one', {
    template: "<div>Component 1</div>",
});

Vue.component('two', {
    template: "<div>Component 2</div>",
});