JSFiddle - React, Tailwind, and code Playground

by nkovacs

HTML

<script src="http://dev.mito.hu/n/vue/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;

new Vue({
    el: 'body',
    data: {
        currentView: null
    },
    methods: {
        race: function () {
            this.currentView = 'one';
            var that = this;
            setTimeout(function() {
                that.currentView = 'two';
            }, 10);
        }
    }
})

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

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