我想创建一个信使组件，当调用该函数时，它将创建一条消息，并且在按下或通过计时器时，首先使其透明 -> 之后，平滑地降低包装器的高度 ->，并且过渡结束后，删除对象
我怎样才能做到这一点
我的代码无法正常工作
<template>
<div class="message" id="wrapper"></div>
</template>
<style lang="scss">
$height-block: 9vmin;
.message {
position: absolute;
z-index: 10;
right: 1vmin;
bottom: 1vmin;
width: 25vmin;
height: 50vmin;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
.wrapper {
* {
box-sizing: border-box;
}
flex-shrink: 0;
width: 100%;
position: relative;
transition: height 0.5s linear;
transition: margin 0.5s linear;
height: $height-block;
padding: 0.5vmin 0;
&__block {
background: rgba(42, 29, 29, 0.8);
height: 100%;
width: 100%;
font-size: 2vmin;
padding: 1vmin;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.5s linear;
}
}
}
</style>
<script>
export default {
name: "Messenger",
};
//eslint-disable-next-line no-unused-vars
window.msg = function msg(msg) {
let wrapper = document.createElement("div");
wrapper.classList.add("wrapper");
document.getElementById("wrapper").appendChild(wrapper);
let wrapper__block = document.createElement("div");
wrapper__block.classList.add("wrapper__block");
wrapper.appendChild(wrapper__block);
wrapper__block.innerHTML = msg;
setTimeout(() => {
wrapper__block.style.opacity = "0";
}, 1000);
wrapper__block.addEventListener("mousedown", () => {
wrapper__block.style.opacity = "0";
});
wrapper__block.addEventListener("transitionend", () => {
wrapper.parentElement.style.height = "0";
wrapper.parentElement.style.margin = "0";
});
wrapper.addEventListener("transitionend", () => {
wrapper.remove(wrapper__block);
});
};
</script>
None
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
