gif
GitHubDemo??https://github.com/LanHai1/vueAnimationAndiScroll
代碼
<!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>
<style>
ul {
padding: 0;
margin: 0;
}
ul > li {
cursor: default;
}
input{
float: right;
}
[v-cloak] {
opacity: 0;
}
.con {
width: 200px;
height: 200px;
border: 1px solid #000000;
}
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
transition: all 0.6s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateX(30px);
}
</style>
</head>
<body>
<div id="app" v-cloak>
<input type="button" value="添加" @click="add" />
<input type="button" value="刪除" @click="remove" />
<h1>雙擊li刪除括儒！</h1>
<h1>滾動(dòng)li吧！</h1>
<br />
<div ref="con" class="con">
<transition-group name="list" tag="ul">
<!-- 注意 想要?jiǎng)h除的時(shí)候動(dòng)畫(huà)實(shí)現(xiàn)在當(dāng)前刪除的元素上 需要給key唯一值 不能是index -->
<li
v-for="(item, index) in list"
:key="item"
@dblclick="indexDelete(index)"
@mouseenter="thisAddColor($event)"
@mouseleave="thisRemove($event)"
>
{{ item }}
</li>
</transition-group>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./lib/iscroll.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
list: [
"我是第1個(gè)li",
"我是第2個(gè)li",
"我是第3個(gè)li",
"我是第4個(gè)li",
"我是第5個(gè)li",
"我是第6個(gè)li",
"我是第7個(gè)li",
"我是第8個(gè)li",
"我是第9個(gè)li",
"我是第10個(gè)li",
"我是第11個(gè)li",
"我是第12個(gè)li",
"我是第13個(gè)li",
"我是第14個(gè)li",
"我是第15個(gè)li",
"我是第16個(gè)li",
"我是第17個(gè)li",
"我是第18個(gè)li",
"我是第19個(gè)li",
"我是第20個(gè)li"
],
count: 20,
listSrcoll: undefined
},
methods: {
add() {
// item唯一 上面綁定了key
this.count += 1;
this.list.push(`我是第${this.count}個(gè)li`);
},
remove() {
this.list.splice(this.list.length - 1, 1);
},
indexDelete(index) {
this.list.splice(index, 1);
},
// 鼠標(biāo)移入高亮
thisAddColor(el) {
el.path[0].style.backgroundColor = "#f00";
},
// 鼠標(biāo)移除還原
thisRemove(el) {
el.path[0].style.backgroundColor = "transparent";
}
},
mounted() {
// 綁定iScroll
this.listSrcoll = new IScroll(this.$refs.con, {
mouseWheel: true // 開(kāi)啟鼠標(biāo)滾輪支持
});
},
updated() {
// 刷新iScroll
this.listSrcoll.refresh();
}
});
</script>
</body>
</html>
