Triggering CSS transition in Javascript

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;
}