Triggering CSS transition in Javascript

Question

I want to trigger a CSS transition (fade-in message) in Javascript (using no framework) when there is an error. I added a trigger class to my div, but it doesn't fade in when the error pops up. Any ideas how I could fix this?

HTML file:

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

Javascript file:

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

CSS file:

.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 is an experimental property that webkit-based browsers used (a long time ago) when testing their implementations of transition .

It should never be used in production and no modern browser supports it.

Use the real transition property.

Answer 2

正如@Bhuwan所说，我在document.getElementById有一个错字。