Vue实现多维网格的过度

标签：htm   script   ash   hid   enter   color   border   family   none   

Vue 使用了一个叫 FLIP 简单的动画队列，使用 transforms 将元素从之前的位置平滑过渡新的位置。

html代码：

  <style>                                                                                                                                                                                               

.list-item {                

transition: all 1s;                

display: inline-block;                

height: 20px;                

width: 20px;                

border: 1px solid #ccc;

}

    .list-enter-active, .list-leave-active {                

transition: all 1s;

}

    .list-enter, .list-leave-to {                

opacity:0;

}

   .list-div {                                

width: 90px;

}

</style>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="list-demo"class="demo">

<button v-on:click="shuffle">Shuffle</button>

<transition-group name="list" tag="div"class="list-div">

<div v-for="item in items" v-bind:key="item"class="list-item">{{ item[0]}}</div>

</transition-group>

</div>  

 js代码： 

new Vue({                

el:‘#list-demo‘,                

data:{                

items:[[1,1],[2,1],[3,1],[4,1],[2,2],[1,2],[4,2],[3,2],[4,3],[2,3],[3,3],[1,3],[3,4],[4,4],[1,4],[2,4]]

},                

methods:{            

shuffle:function(){

this.items= _.shuffle(this.items)

}

}

});

Vue实现多维网格的过度

标签：htm   script   ash   hid   enter   color   border   family   none   

原文地址：http://www.cnblogs.com/littlechen/p/7762471.html