今天学了Vue的过渡效果，感觉挺有意思的，写篇博客记录一下
emmmmm就放在一个文件了，各位有兴趣的话将就着看。
有一些小bug，比如删除了1号之后，序列号不会自动更新...有时间再改一下吧，主要是看效果
<!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">
<link rel="stylesheet" href="./lib/animate.css">
<title>Document</title>
</head>
<style>
body,
ul,
ol {
padding: 0;
margin: 0;
}
.starList ul {
padding-top: 20px;
}
.starList {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
.starLi {
margin-bottom: 10px;
padding: 10px;
list-style: none;
border: 1px dashed #ccc;
}
.starLi:hover {
background-color: #fca9d0;
transition: all 0.3s ease-in;
}
.star-enter,
.star-leave-to {
/*添加元素时从下方移入的效果*/
transform: translateY(20px);
opacity: 0;
}
.star-move {
/*元素移动时的效果*/
transition: 0.5s all ease;
}
.star-leave-active {
/*使删除时更平滑*/
position: absolute;
/*解决absoulte改变li的宽度问题*/
width: 100%;
}
.star-enter-active,
.star-leave-active {
transition: 0.3s all;
}
</style>
<body>
<div id="app">
<div class="starList">
<label>Add new star：<input type="text" v-model="name"></label>
<button @click="addStar">Add</button>
<ul>
<transition-group name="star">
<li v-for="(item,i) of list" class="starLi" :key="item.id" @click="del(i)">
{{ item["id"] }} - {{ item["name"] }}
</li>
</transition-group>
</ul>
</div>
</div>
<script src="./lib/vue.v2.5.21.js"></script>
<script>
new Vue({
el: "#app",
data: {
list: [
{ id: "1", name: "李白" },
{ id: "2", name: "赵信" },
],
name: "",
id: ""
},
methods: {
addStar() {
let newIndex;
if (this.list.length === 0) { newIndex = 0 }
else { newIndex = parseInt(this.list.slice(-1)[0].id); }
this.list.push({
id: newIndex + 1,
name: this.name
})
},
del(i) {
this.list.splice(i, 1);
}
}
})
</script>
</body>
</html>
扫一扫
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
