Question

我想通过将一个类添加到div来淡入错误消息（如果有的话）。该错误消息当前不会显示，但不会消失。

这是html。这只是一个空的div，错误类实际上不包含任何样式。

<div class="error"></div>

这是触发错误消息显示的javascript：

  const showError = document.querySelector('.error');
  showError.classList.add("error-message-fade-in");
  showError.innerHTML = errorMessages;

这是CSS：

  .error-message-fade-in {
    opacity: 1;
    transition: opacity 1000ms;
    color: #de5959;
    background-color: #ffe9e9;
    padding: 20px 26px;
  }

Answer 1

这应该可以正常工作，只需确保已设置过渡实际生效所需的属性。将div的初始opacity设置为0，这将使元素不可见，并添加过渡时间；之后，您只需要添加带有opacity: 1的类，即可完成转换。

function fadeError() {
  const showError = document.querySelector('.error');
  showError.classList.add("error-message-fade-in");
  showError.innerHTML = 'Error';

}

.error {
  opacity: 0;
  transition: all 0.5s;
}

.error-message-fade-in {
  opacity: 1;
  transition: opacity 1000ms;
  color: #de5959;
  background-color: #ffe9e9;
  padding: 20px 26px;
}

<div class="error"></div>

<button type="button" onclick="fadeError()">Fade</button>

Answer 2

此处的解决方案JS Fiddle的链接

将初始化不透明度0设置为.error

无法通过JavaScript触发的CSS淡入

2 个答案: