javascript - 当类被 javascript 删除时，转换不起作用

Question

我是 html、css 和 js 的新手，正在从事一些婴儿元素以获取更多经验。这次我正在学习如何在我的网站上使用 javascript，但我遇到了问题。我有一个错误消息 block ，我想通过过渡更改它的高度。同样在 js 中，我添加了提供其属性的类，并在 3 秒后将其删除。当我添加类时，过渡有效，但当类被删除时，过渡停止工作。

.transition-msg {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}


.error-window {
    max-height: 200px;
    background-color: rgb(241, 128, 128);
    border: #888 solid 0.04rem;
    border-radius: 0.2rem;
}

<input type="submit" name="submit" value="Sign In" class="btn">
<div id="form-msg" class="transition-msg"></div>

function onSubmit(e) {
  e.preventDefault();
  if(firstnameInput.value === '' || lastnameInput.value === '' || passwordInput.value === '' || emailInput.value === '' || !termsBox.checked) {
    //alert('Please enter all fields');
    msg.classList.add('error-window');
    msg.innerHTML = '<p>Please enter all fields</p>';

    // Remove error after 3 seconds
    setTimeout(() => {msg.innerHTML = ''; msg.classList.remove('error-window')}, 3000);

Answer 1

您的代码有两个问题。

首先是在您的 CSS 中，您已将 background-color 属性放在修饰符类(您的 .error-window)上，并且一旦该类移除背景会立即消失，因为过渡仅针对 max-height 设置。要解决此问题，只需将 background-color 移动到父类 .transition-msg 类即可。

动画化 max-height 的第二个问题是，在您的 JS 代码中，您在转换完成之前删除了 HTML，因此 div 的高度立即变为零(如果没有内容则没有高度)。 解决方案 是等到 max-height 属性的转换完成，然后删除 HTML。

这是工作 DEMO

基本上，它显示的是您可以在当前方法中使用另一种 setTimeout() 方法，但延迟 500 毫秒以匹配 CSS 转换，然后删除 HTML。

    setTimeout(() => { 

        msg.classList.remove('error-window');
        setTimeout(() => { 
             msg.innerHTML = '';
        }, 500);

    }, 3000);