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

【问题标题】：Transition doesn' t work when class been removed by javascript当类被 javascript 删除时，转换不起作用
【发布时间】：2019-09-06 17:48:07
【问题描述】：

我是 html、css 和 js 的新手，正在从事一些婴儿项目以获取更多经验。这次我正在学习如何在我的网站上使用 javascript，但我遇到了问题。我有一个错误消息块，我想通过过渡来改变它的高度。同样在 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);

【问题讨论】：

标签： javascript html css height transition

【解决方案1】：

您的代码有两个问题。

首先是在您的 CSS 中，您已将 background-color 属性放在修饰符类（您的 .error-window）上，并且一旦删除该类，背景就会立即消失，因为仅为 @ 设置了过渡987654324@。要解决此问题，只需将 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);

【讨论】：

【解决方案2】：

请使用过渡到主类这里：

.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;

}

【讨论】：