無法通過JavaScript觸發的CSS淡入

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小提琴的這里鏈接

• 將初始化不透明度0設置為.error