sutff

stuff动画

by Robbie Yang

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .txtColor {
            color: red;
        }
        .isShow {
            opacity: 0;
        }
        #app {
            background-color: transparent;
            box-sizing: content-box;
            width: 220px;
        }
        .item {
            display: inline-block;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border:1px solid #ccc;
        }
        .flip-list-move {
            transition: transform 1s;
        }
    </style>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
</head>
<body>
    <!-- <div id="app">
        <transition-group name="list-complete" tag="p">
            <div v-for="item in list" :key="item">
                <comp-item v-for="item in list" :content="item" :key="item"></comp-item>
            </div>
        </transition-group>
        <button @click="change">click</button>
    </div> -->
    <div id="flip-list-demo" class="demo">
        <button v-on:click="shuffle">Shuffle</button>
        <transition-group name="flip-list" tag="ul">
            <li v-for="item in items" v-bind:key="item">
            {{ item }}
            </li>
        </transition-group>
    </div>
</body>
<script>
    new Vue({
        el: '#flip-list-demo',
        data: {
            items: [1,2,3,4,5,6,7,8,9]
        },
        methods: {
            shuffle: function () {
                this.items = _.shuffle(this.items)
            }
        }
    })
    // Vue.component('comp-item',{
    //     data () {
    //         return {
    //         }
    //     },
    //     props: ['content'],
    //     template:`<div...