在 Javascript 中触发 CSS 转换

Question

我想在出现错误时在 Javascript（不使用框架）中触发 CSS 转换（淡入消息）。我在我的 div 中添加了一个触发器 class，但是当错误弹出时它并没有淡入。有什么办法可以解决这个问题吗？

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-based 浏览器（很久以前）在测试 [=11] 的实现时使用的=].

绝不能在生产中使用它，现代浏览器也不支持它。

使用真实的 transition 属性.

Answer 2

正如@Bhuwan 所说，我在 document.getElementById 处打错了字。

在 Javascript 中触发 CSS 转换

Triggering CSS transition in Javascript

javascript

css

animation

transition

fadein