vuejs代码-列表过渡-1
程序员文章站
2024-01-14 09:02:52
...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>列表过渡-1</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.list-item {
display: inline-block;
margin-right: 10px;
/* 效果与使用list-move一样 */
transition: all 1s;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}
/* .list-move {
transition: transform 1s;
} */
</style>
<script src="E:/JavaScriptLibrary/lodash.js"></script>
<script src="E:/JavaScriptLibrary/vue.js"></script>
</head>
<body>
<div id="list-demo" class="demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<button v-on:click="shuffle">Shuffle</button>
<transition-group name="list" tag="p">
<span v-for="item in items" :key="item" class="list-item">
{{item}}
</span>
</transition-group>
<br>
</div>
<script>
new Vue({
el: '#list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods:{
add: function(){
//this.items.push(this.nextNum)
//this.nextNum++
this.items.splice(this.randomIndex(),0,this.nextNum++)
},
remove: function(){
//this.items.pop()
this.items.splice(this.randomIndex(), 1)
},
randomIndex: function(){
return Math.floor(Math.random() * this.items.length)
},
shuffle: function(){
this.items = _.shuffle(this.items)
}
}
})
</script>
</body>
</html>
转载于:https://my.oschina.net/u/1375322/blog/1585895