- transition-group动画
- v-move 移动的元素
- tag 标签
- name 动画名
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ToDOlist</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
@keyframes slideIn{
from{opacity: 0; transform: translate(0,-100px);}
to{opacity: 1;transform:translate(0,0);}
}
@keyframes slideOut{
from{opacity: 1; transform: translate(0,0);}
to{opacity: 0;transform:translate(-100%,0);}
}
.slide-enter-active{
animation: slideIn ease .6s;
}
.slide-leave-active{
animation: slideOut ease .6s;
position: absolute;
}
.slide-move{
transition: all ease .3s;
}
</style>
</head>
<body>
<div id="app">
<h1>To DO List</h1>
<input type="text" placeholder="输入计划" @keyup.enter="addItem()" v-model="temp" />
<h3>未完成</h3>
<transition-group name="slide" tag="div">
<div class="item" v-for="item in undolist" :key="item.title">
<input type="checkbox" v-model="item.done" />
<span>{{item.title}}</span>
<button type="button" @click="delItem(item)">删除</button>
</div>
</transition-group>
<h3>已经完成</h3>
<transition-group name="slide" tag="div">
<div class="item" v-for="item in dolist" :key="item.title">
<input type="checkbox" v-model="item.done" />
<span>{{item.title}}</span>
<button type="button" @click="delItem(item)">删除</button>
</div>
</transition-group>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
created(){
var str=localStorage.getItem("list")||"[]";//获取本地存储的list，默认为【】
this.list=JSON.parse(str);//把字符串转换为对象
},
data: {
temp: "", //和输入框绑定
list: [{
title: "学习vue",
done: true
}, {
title: "学习uni-app",
done: false
}, {
title: "学习JavaScript",
done: true
}], //todo清单列表
},
methods: {
delItem(item) {
var ind = this.list.indexOf(item);
this.list.splice(ind, 1);
},
addItem() { //添加列表
if (this.temp.trim() === "") {
alert("不能为空");
} else {
this.list.unshift({
title: this.temp.trim(),
done: false
});
this.temp = "";
}
}
},
computed: {
"dolist": function() {
return this.list.filter(item => item.done)
}, //完成列表
"undolist": function() {
return this.list.filter(item => !item.done)
}, //未完成列表
},
watch:{
"list":{
handler:function(){//监听列表的变化
var str=JSON.stringify(this.list);//列表转化为字符串
localStorage.setItem("list",str);//存储在本地
},
deep:true
}
}
})
</script>
</body>
</html>
TODOlist动画版