12/09 Staggering Transitions.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>09</title>
    <script src="vue.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <style>
    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;
    }
    </style>
</head>

<body>
    <div id="demo">
        <input v-model="query">
        <ul>
            <li v-for="item in list | filterBy query" transition="staggered" stagger="1000">
                {{item.msg}}
            </li>
        </ul>
    </div>
    <script>
    new Vue({
        el: '#demo',
        data: {
            query: '',
            list: [{
                msg: 'Bruce Lee'
            }, {
                msg: 'Jackie Chan'
            }, {
                msg: 'Chuck Norris'
            }, {
                msg: 'Jet Li'
            }, {
                msg: 'Kung Fury'
            }]
        }
    })
    </script>
</body>

</html>