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

Question

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

.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

请使用过渡到主class 这里：

.transition-msg {
    max-height: 0;
    overflow: hidden;
}


.error-window {
    max-height: 200px;
    background-color: rgb(241, 128, 128);
    border: #888 solid 0.04rem;
    border-radius: 0.2rem;
    -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;

}

Answer 2

您的代码有两个问题。

首先是在您的 CSS 中，您将 background-color 属性放在修饰符 class（您的 .error-window）上，并且一旦class 被移除，背景立即消失，因为过渡只为 max-height 设置。要解决此问题，只需将 background-color 移动到父级 class，将 .transition-msg class.

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

工作正常DEMO

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

    setTimeout(() => { 

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

    }, 3000);

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

Transition doesn' t work when class been removed by javascript

html

javascript

css

height

transition