<template>
<div class="drawer">
<button @click="clickBtn">点击</button>
<div class="background" v-if="open" @click.self="closeDrop">
<div class="drop" :class="{ active: isActive, close: isClose }">drop</div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {},
data() {
return {
open: false,
isActive: false,
isClose: false
};
},
methods: {
clickBtn() {
this.open = true;
this.isActive = true;
this.isClose = false;
},
closeDrop() {
this.isClose = true;
setTimeout(() => {
this.open = false;
}, 200);
}
}
};
</script>
<style scoped lang="scss">
.background {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba($color: #000000, $alpha: 0.5);
.drop {
width: 0px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
background: #fff;
}
// 开
.active {
animation: opendoor 0.3s normal forwards;
}
@keyframes opendoor {
from {
width: 0;
}
to {
width: 45%;
}
}
// 关
.close {
animation: close 0.3s normal forwards;
}
@keyframes close {
0% {
width: 45%;
}
100% {
width: 0;
opacity: 0;
}
}
}
</style>
简单的vue抽屉效果
最新推荐文章于 2024-06-26 15:42:20 发布