在JavaScript中觸發CSS轉換

Question

發生錯誤時，我想在Javascript（不使用框架）中觸發CSS轉換（淡入消息）。 我在div中添加了一個觸發器類，但是當錯誤彈出時它不會消失。 有什么想法我可以解決這個問題嗎？

HTML檔案：

<div id="errorID" class="errorMessage">
    <strong>Error!</strong> Something went wrong.
</div>

Javascript文件：

if (!valid){ // error -> errorTextMessage
    var errorBox = document.getElementsById('errorID');
    errorBox.classList.add("errorTrigger");
}

CSS文件：

.errorMessage{
    padding: 20px;
    background-color: #f44336;
    color: white;
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
 }

.errorMessage.errorTrigger{
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 1;
}

Answer 1

-webkit-transition是實驗性屬性，基於Webkit的瀏覽器（很久以前）在測試其transition的實現時使用過。

永遠不要在生產中使用它，也沒有現代的瀏覽器支持它。

使用實際的transition屬性。

Answer 2

正如@Bhuwan所說，我在document.getElementById有一個錯字。