vue/test/functional/fixtures/animation.html

<script src="../../../dist/vue.js"></script>
<style type="text/css">
    h1 {
        display: inline-block;
    }
    .v-enter {
        animation: fadein .2s;
        -webkit-animation: fadein .2s;
    }
    .v-leave {
        animation: fadeout .2s;
        -webkit-animation: fadeout .2s;
    }
    @keyframes fadein {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        50% {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    @keyframes fadeout {
        0% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }
        50% {
            transform: scale(1.5);
            -webkit-transform: scale(1.5);
        }
        100% {
            transform: scale(0);
            -webkit-transform: scale(0);
        }
    }
    @-webkit-keyframes fadein {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        50% {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    @-webkit-keyframes fadeout {
        0% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }
        50% {
            transform: scale(1.5);
            -webkit-transform: scale(1.5);
        }
        100% {
            transform: scale(0);
            -webkit-transform: scale(0);
        }
    }
</style>

<div id="test">
    <h1 v-animation v-if="ok">Hahahah</h1>
    <br>
    <button v-on="click: ok = !ok">toggle</button>
</div>

<script>
    var test = new Vue({
        el: '#test',
        data: {
            ok: true
        }
    })
</script>