单行列表增、删、打乱动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.x-enter,
.x-leave-to {
transform: translateY(40px);
opacity: 0;
}
.x-enter-active,
.x-leave-active {
transition: all 2s;
}
.x-leave-active {
position: absolute;
}
.x-move {
transition: transform 1s;
}
span {
display: inline-block;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="app">
<button @click="addNum(numArr,nextNum++)">add</button>
<button @click="deleteNum(numArr)">delete</button>
<button @click="changeNum">change</button>
<br>
<transition-group name="x">
<span v-for="(num,index) in numArr" :key="num">{{ num }}</span>
</transition-group>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
numArr: [1, 2, 3, 4, 5, 6, 7],
nextNum: 8
},
methods: {
randomNum(arr) {
return Math.floor(arr.length * Math.random());
},
addNum(arr, num) {
arr.splice(this.randomNum(arr), 0, num);
},
deleteNum(arr) {
let ran = this.randomNum(arr);
let num = arr[ran];
arr.splice(ran, 1);
return num;
},
changeNum() {
let arrCopy = this.numArr.slice(0);
let len = arrCopy.length;
for (let i = 0; i < len; i++) {
let x = this.deleteNum(arrCopy);
this.addNum(arrCopy, x);
}
this.numArr = arrCopy;
}
}
});
</script>
</body>
</html>