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

there is a typo getElementsById should be getElementById — Bhuwan
– Bhuwan, Commented Mar 30, 2018 at 10:55
@Bhuwan Thank you man you saved my life! Didn't see that typo. — Tóth Attila
– Tóth Attila, Commented Mar 30, 2018 at 11:04

Quentin · Accepted Answer · 2018-03-30 10:52:12Z

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.

answered Mar 30, 2018 at 10:52

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tóth Attila Over a year ago

Thank you for the suggestion, I'm gonna use that from now on.

Alexander · Accepted Answer · 2018-04-03 17:07:30Z

0

As @Bhuwan said, I had a typo at document.getElementById.

edited Apr 3, 2018 at 17:07

Alexander

4,5527 gold badges31 silver badges46 bronze badges

answered Mar 30, 2018 at 11:05

Tóth Attila

1491 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

Triggering CSS transition in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related