transition tests

by nkovacs

HTML

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

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

CSS

#comp1 {
    background: red;
    width: 300px;
    height: 400px;
}
#comp2 {
    background: blue;
    width: 100px;
    height: 100px;
    transition: all ease 1.5s;
}
#comp3 {
    background: green;
    width: 400px;
    height: 200px;
}

JavaScript

Vue.config.debug = true;

Vue.transition("page", {
    css: false,
    enter: function (el, done) {
        done();
    },
    afterEnter: function (el) {
    },
    leave: function (el, done) {
        console.log('leave')
        console.log(el);
        el.innerText += 'leave';
        setTimeout(function() {
        	done();
        }, 1000);
    },
    afterLeave: function (el) {
    }
});


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

Vue.component('two', {
    template: '<div id="comp2">Component 2</div>',
    attached: function() {
        var el = this.$el;
        setTimeout(function() {
        	el.style.background = 'yellow';
        }, 500);
    }
});

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

new Vue({
    el: 'body',
    data: {
        currentView: 'one'
    },
    methods: {
        reset: function () {
            this.currentView = 'one';
        },
        test: function () {
            this.currentView = 'two';
        }
    }
});