JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.10.3/vue.js"></script>

<div id="test">
    <button v-on="click: show=!show">click</button>
    <p>show:{{show}}</p>
    <p v-effect="my-effect" v-if="show">{{message}}</p>
</div>

JavaScript

Vue.effect('my-effect', {
    enter: function (el, insert, timeout) {
        setTimeout(function() {
            insert();
        }, 2000);
    },
    leave: function (el, remove, timeout) {
        timeout(function() {
            remove();
        }, 1000);
    }
})

new Vue({
    el: "#test",
    data: {
        message: "hello",
        show: true,
    },
});