<!-- Vue <transition-group> 列表的删除、增加元素过渡案例-->
<template>
<div class="page">
<p>
<button v-on:click="shuffle">Shuffle</button>
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
</p>
<transition-group name="list-complete" tag="ul" class="list-complete">
<li
v-for="item in items"
v-bind:key="item"
class="list-complete-item"
>
{{ item }}
</li>
</transition-group>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
nextNum: 10
}
},
computed: {},
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)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.list-complete {
list-style: none;
padding: 0;
margin: 0;
}
.list-complete-item {
transition: all 1s;
border: 1px solid #ddd;
padding: 8px;
margin-bottom: 8px;
background-color: #fff;
}
.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;
}
</style>
/*
* 在main.js中全局引入lodash.min.js
* https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js
* lodash.js是一个JavaScript实用工具库
* lodash.js遵循MIT开源协议发布
* lodash.js中文文档:https://www.lodashjs.com/
* */
import '@/assets/js/lodash.min.js'