javascript - 如何在使用 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

您不能转换(或动画)显示属性。 display 属性是 on 或 off 没有任何过渡或动画。

您可以做的是为不透明度设置动画并在开始和结束时更改显示属性。

类似于:

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

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