如何将一个元素动画到屏幕的底部，然后从DOM中删除它

Question

我有一个可以通过按下div内的按钮来删除的div。当我在div中单击此按钮时，它会立即删除它。我想让它在屏幕底部动起来，并在大约一秒钟的时间内收缩。我该怎么做呢?

这是从DOM中删除元素的函数。

function close_window(app) {
app.parentElement.removeChild(app);
}

这是我应用到元素的样式。

.element {
position: absolute;
display: flex;
flex-direction: column;
width: 75vw;
height: 60vh;
border: 1px solid #eee;
overflow: hidden;
resize: both;
transition-timing-function: linear;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Answer 1

在实际删除元素之前让动画完成。等待setTimeout方法完成后，在<div>上调用remove。

const el = document.querySelector('.element');
const close = document.querySelector('.close');
close.addEventListener('click', close_window);
function close_window(e) {
el.classList.add('removed');
setTimeout(() => el.remove(), 1000);
}

body {
margin: 0;
}
.element {
position: absolute;
width: 75vw;
height: 60vh;
background: beige;
display: flex;
align-items: center;
justify-content: center;
transition: 1s linear;
transform: translate(
calc((100vw - 75vw) / 2),
calc((100vh - 60vh) / 2)
);
transform-origin: bottom;
}
.removed {
transform:
translate(
calc((100vw - 75vw) / 2),
calc(100vh - 60vh)
)
scale(0);
}

<div class="element">
<button class="close">Close</button>
</div>