手写一个抽屉组件
基于vue的过渡动画
- 样式(点击消息提醒,从右侧弹出抽屉,点击其他关闭)
- transition + v-show/v-if
<template>
<transition name="show" mode="out-in" @before-enter='transitionComplete' @after-leave='transitionComplete' @enter='transitioning' @leave='transitioning'>
<div class="message-container" ref="message-container" @click="close" v-show="drawerClose">
<div class="message">
</div>
</div>
</transition>
</template>
<script>
export default {
name: "messageCenter",
props: {
drawerClose: {//父组件的消息提醒icon,控制显示隐藏
type: Boolean,
default: false,
},
},
data() {
return {
};
},
methods: {
/**
* @description 动画结束
*/
transitionComplete() {
const body = document.querySelector("body");
body.style.overflow = "visible";
},
//动画进行时
transitioning() {
const body = document.querySelector("body");
body.style.overflow = "hidden";
},
close(e) {
const parent = this.$refs["message-container"];
if (
e.target.className != "message-container" &&
e.target.className != "el-icon-bell" &&
!parent.contains(e.target)
) {//除了本身及子元素和消息提醒,点击关闭
this.$emit("closeMessage", false);
}
},
},
mounted() {
window.addEventListener("click", this.close);
},
beforeDestroy() {
window.removeEventListener("click", this.close);
},
};
</script>
<style lang="less" scoped>
.show-enter-active,
.show-leave-active {
transition: all 0.3s;
}
.show-enter,
.show-leave-to {
transform: translateX(500px);
}
.message-container {
// transition: all 0.3s ease-in-out;
position: absolute;
bottom: 0;
right: 0px;
width: 500px;
height: calc(100vh - 60px);
background: #ffffff;
z-index: 99;
box-shadow: -5px 11px 22px 0px rgba(0, 0, 0, 0.16);
}
</style>
- 动画
v-enter: 弹框显示前的样式,过渡的开始状态, 也就是动画还没开始前,动画的起始位置
v-enter-active 动画生效的状态,从底部过渡到页面的过程
v-enter-to 动画执行完的结束状态,也就是弹出结束后显示在页面的样式
v-leave 隐藏元素,离开动画的开始状态,元素消失开始的样式
v-leave-active 隐藏元素过程中,离开动画的生效动态即离开的过程,从上到下滑
v-leave-to 隐藏元素完成,离开动画的结束状态(此时v-leave的样式被删除)
- 事件钩子
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
我这里用了事件钩子,是因为,在动画过程中会重新计算宽高,所以会有滚动条,即使绝对定位也不行。所以在动画的时候给body加了overflow,结束之后又还原。就不会有滚动条了,前提是内容滚动区不是body,而是el-main之内的区域滚动。否则可能会有问题。
- 内容可以自己自定义,蒙层也可以自己添加。自己动手丰衣足食。
- 添加蒙层的时候,要注意层级。关闭的时候要隐藏蒙层,不然可能会点不到任何东西。