如何使用javascript和css在弹出的消息上设置动画或使用转换

Question

我目前可以随心所欲地显示和消失消息，但转换不起作用，这就是我尝试的。

const alertMsg = document.querySelector('.alert');
contactForm.addEventListener('submit', formSubmitted);
function formSubmitted(e) {
//other stuff
alertMsg.style.display = 'block';
setTimeout(() => {
alertMsg.style.display = 'none';
}, 5000);
}

.alert {
transition: all 0.5s ease-out;
}

<div class="alert">Your message has been sent, I will get back to you as soon as possible.</div>

消息立即消失并再次出现，我如何使用当前的过渡来制作某种动画？

这是我的第一个问题，很抱歉，如果我遗漏了任何信息，如果需要，我会补充更多。感谢

Answer 1

您不能转换(或设置动画(显示属性。CCD_ 1属性为打开或关闭，没有任何可转换或设置动画的内容。

您可以制作不透明度的动画，并在开始和结束时更改显示属性。

类似于：

@keyframes showBlock {
from { display: block; opacity: 0; }
to { opacity: 1; }
}
@keyframes hideBlock {
from { opacity: 1; }
to { opacity: 0; display: none; }
}