JSFiddle - React, Tailwind, and code Playground

by yyx990803

HTML

<script src="https://cdn.jsdelivr.net/vue/0.12.16/vue.js"></script>
<div id="demo">
    <input v-model="query">
    <ul>
        <li v-repeat="list | filterBy query" v-transition="staggered" stagger="100">{{msg}}</li>
    </ul>
</div>

CSS

ul {
    padding-left: 0;
    font-family: Helvetica, Arial, sans-serif;
}
.staggered-transition {
    transition: all .5s ease;
    overflow: hidden;
    margin: 0;
    height: 20px;
}
.staggered-enter, .staggered-leave {
    opacity: 0;
    height: 0;
}

JavaScript

new Vue({
    el: '#demo',
    data: {
        query: '',
        list: [
            { msg: 'Bruce Lee' },
            { msg: 'Jackie Chan' },
            { msg: 'Chuck Norris' },
            { msg: 'Jet Li' },
            { msg: 'Kung Fury' }
        ]
    }
})