参考地址 Vue FLIP简单实现及理解 vue-flip翻转组件的 demo Vue Flip
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | //HTML<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script><div id="list-complete-demo" class="demo"> <button v-on:click="shuffle">Shuffle</button> <button v-on:click="add">Add</button> <button v-on:click="remove">Remove</button> <transition-group name="list-complete" tag="p"> <span v-for="item in items" v-bind:key="item" class="list-complete-item" > {{ item }} </span> </transition-group></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | //JSnew Vue({ el: '#list-complete-demo', data: { items: [1,2,3,4,5,6,7,8,9], nextNum: 10 }, methods: { randomIndex: function () { return Math.floor(Math.random() * this.items.length) }, add: function () { this.items.splice(this.randomIndex(), 0, this.nextNum++) }, remove: function () { this.items.splice(this.randomIndex(), 1) }, shuffle: function () { this.items = _.shuffle(this.items) } }}) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //CSS.list-complete-item { transition: all 1s; display: inline-block; margin-right: 10px;}.list-complete-enter, .list-complete-leave-to/* .list-complete-leave-active for below version 2.1.8 */ { opacity: 0; transform: translateY(30px);}.list-complete-leave-active { position: absolute;} |
CSS代码理解：
list-complete-item{
transition:all 1s;
…
}
将该class加在transition-group 下的span中。transition效果为使产生过渡。相比于之前使用的 v-enter-active{ }有所区别。.list-complete-leave-active{
position:absolute;
}
为了使remove的时候，更平滑。所以保持了绝对位置。