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: test">Click me</a>

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

JavaScript

Vue.config.debug = true;

Vue.transition("page", {
    enter: function(el, done) {
        console.log(el.id + ' entering');
        el.textContent = el.textContent + 'entering';
        setTimeout(function() {
            done();
        }, 1500);
    },
    afterEnter: function (el) {
        console.log(el.id + ' afterEnter');
        el.textContent = el.textContent + 'afterEnter';
    },
    leave: function(el, done) {
        console.log(el.id + ' leaving');
        el.textContent = el.textContent + 'leaving';
        setTimeout(function() {
            done();
        }, 1500);
    },
    afterLeave: function (el) {
        console.log(el.id + ' afterLeave');
        el.textContent = el.textContent + 'afterLeave';
    },
});

new Vue({
    el: 'body',
    data: {
        currentView: null
    },
    methods: {
        test: function () {
            var that = this
            console.log('component 1 requested');
            that.currentView = 'one';
            setTimeout(function() {
                console.log('component 2 requested');
                that.currentView = 'two';
            }, 1000);
            setTimeout(function() {
                console.log('component 3 requested');
                that.currentView = 'three';
            }, 2000);
        }
    }
})

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

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

Vue.component('three', {
    template: '<div id="comp3">Component 3</div>',
});