Vue中过渡与动画的案例
程序员文章站
2022-05-04 20:01:12
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app {
width: 600px;
margin: 10px auto;
}
.tb {
border-collapse: collapse;
width: 100%;
}
.tb th {
background: #ff8c00;
color: white;
}
.tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
}
.add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
.del li {
list-style: none;
padding: 10px;
}
.del {
position: absolute;
top: 55%;
left: 40%;
width: 300px;
border: 1px solid rgba(0, 0, 0, 0.9);
transition: all 0.5s;
background: rgba(0, 0, 0, 0.2);
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="add">
编号: <input type="text" id="id" v-color v-focus v-model="id">
品牌名称: <input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length <= 0">
<td colspan="4">没有数据</td>
</tr>
<!-- 加入key="index"时候必须把所有参数写完整 -->
<tr v-for="(item, index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date | dateFrm("-")}}</td>
<td><a href="javascripe:void(0)" @click="del(item.id)">删除</a></td>
</tr>
</table>
</div>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @before-leave="beforeLeave"
@leave="leave" @after-leave="afterLeave">
<div class="del" v-show="isshow">
<ul>
<li>您确定删该数据吗？</li>
<button @click="delById">确定</button>
<button @click="showClose">关闭</button>
</ul>
</div>
</transition>
</div>
<script>
/*
*使用过滤函数获取年月日 并过滤转化为正常的日期格式
*/
Vue.filter("dateFrm", function (time, spliceStr) {
//return 2020-1-10
let date = new Date(time);
//获取年份
let year = date.getFullYear();
//获取月份
let month = date.getMonth() + 1;
//获取日数
let day = date.getDay();
return year + spliceStr + month + spliceStr + day;
});
Vue.directive("focus", {
inserted(el) {
el.focus();
}
});
Vue.directive("color", {
inserted(el) {
el.style.color = "red";
}
})
const app = new Vue({
el: '#app',
data: {
//对将要删除数据的id进行保存
delId: '',
//isshow删除框
isshow: false,
id: 0,
name: '',
list: [
{ id: 1, name: "云课堂", date: Date() },
{ id: 2, name: "课堂网站", date: Date() },
]
},
methods: {
add(id, name) {
if (this.id == "") {
alert("请填写编号");
} else if (this.name == "") {
alert("请填写品牌名称");
} else {
//id不可以重复
if (this.id > this.list.length) {
//添加新的数据 Date是系统时间 不需要this指针
this.list.push({ "id": this.id, "name": this.name, "date": Date() });
} else {
alert("Id长度错误")
}
}
},
del(id) {
//点击删除的时候 显示删除框
this.isshow = true;
//将得到的id保存到delId中
this.delId = id;
},
/*
*使用钩子函数实现过渡和动画
*显示删除框的位置及动画效果
*/
/*进入时的动画*/
beforeEnter(el) {
el.style.offsetTop = "90%"
},
enter(el, done) {
//offsetHeight / offsetWidht 没有实际意义，但是不添加没有过渡动画效果
el.offsetHeight;
el.style.offsetTop = "35%";
},
afterEnter(el) {
//........需要用到某些功能在写业务逻辑
},
beforeLeave(el) {
el.style.offsetTop = "35%"
},
/*离开时的动画*/
leave(el, done) {
el.offsetHeight;
el.style.offsetTop = "80%";
//加上时间函数 不然done()方法调用不了
setTimeout(
function () {
done();
}
)
},
afterLeave(el) {
//........需要用到某些功能在写业务逻辑
},
showClose(el) {
this.isshow = false;
},
delById() {
_this = this;
//根据DelId删除对应的数据
let index = this.list.findIndex(
function (item) {
return item.id == _this.delId;
}
);
//splice()数组方法
this.list.splice(index, 1)
//关闭删除框
this.isshow = false;
}
}
})
</script>
</body>
</html>
上述代码，表格的过渡与动画中定义过滤器dateFrm，自定义focus，color，v-if，v-show指令以及事件处理机制，使用了一些钩子函数来实现过渡与动画
上一篇： Android自定义控件系列——View与内容作滑动或动画
下一篇： RecyclerView