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>

该消息只是立即消失并重新出现，我如何使用当前的过渡来制作某种动画？

这是我的第一个问题，很抱歉，如果我错过了任何信息，如果需要，我会添加更多。谢谢

标签： javascriptcsscss-transitions

Answer 1

您不能转换（或动画）显示属性。该display属性是打开或关闭的，没有任何东西可以转换或动画。

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

就像是：

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

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