Trying to trigger a CSS transition using JavaScript

Question

Playing with JavaScript and CSS transition, I tried to remove a CSS class right after having dynamically inserted a div, using JavaScript and innerHTML.

I'm really surprised to see that the CSS transition associated with the opacity of the blue div is not triggered the way I want (works under Safari, works randomly under Chrome, doesn't work under Firefox Dev Edition). Can someone explain this phenomenon ?

I'm not sure about why it is not working the same way as it does for the red div. Maybe something I don't know about how browsers handle innerHTML ?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Having fun with JS</title>
    <style>
        .std {
            width:100px;
            height:100px;
            opacity: 1;
            transition: opacity 5s;
        }

        .std--hidden {
            opacity: 0;
        }

        .std--red {
            background-color: red;
        }

        .std--blue {
            background-color: blue;
        }
    </style>
</head>
<body>
<button>click here</button>
<div class='std std--red std--hidden'></div>
<div class='insert-here'>
</div>
<script>
    // let a chance to the browser to trigger a rendering event before the class is toggled
    // see http://stackoverflow.com/a/4575011
    setTimeout(function() {
        // everything works fine for the red div
        document.querySelector('.std--red').classList.toggle('std--hidden');
    }, 0);


    document.querySelector('button').addEventListener('click', function(e) {

        var template = `<div class='std std--blue std--hidden'></div>`;
        document.querySelector('.insert-here').innerHTML = template;

        setTimeout(function() {
            // Why does the CSS transition seems to be triggered randomly ?
            // well more exactly
            // - it works under my Safari
            // - it does not work under my FirefoxDeveloperEdition
            // - it works randomly under my Google Chrome
            document.querySelector('.std--blue').classList.toggle('std--hidden');
        }, 0);

    });
</script>
</body>
</html>

EDIT

So I've just read the CSS transitions specs and found this

This processing of a set of simultaneous style changes is called a style change event. (Implementations typically have a style change event to correspond with their desired screen refresh rate, and when up-to-date computed style or layout information is needed for a script API that depends on it.)

Can this be the explanation somehow ? Does the setTimeout 0 is too fast on some browsers that they don't have time to compute the style differences and thus don't trigger a style change event ? Indeed if use a longer setTimeout (say, ~16.6666, guessing a 1/60 refresh rate...) it seems to work everywhere. Can someone confirm that ?

What's the point of using setTimeout? It isn't doing anything. Maybe try removing them and see what happens? — Adjit
– Adjit, Commented Mar 4, 2016 at 20:07
Yes it is useful, it queues the code removing the css class after that the browser has first rendered the DOM — thomas.g
– thomas.g, Commented Mar 4, 2016 at 20:09
Try removing the backtick where you inserted the inner HTML elements in your var template. and see instead add double quotes "" — MAQ Khan
– MAQ Khan, Commented Mar 4, 2016 at 20:11
oooh... tha backtick doesn't do anything... you should probably be using double quotes (") for the outside and single quotes (') for the class= — Adjit
– Adjit, Commented Mar 4, 2016 at 20:12

thomas.g · Accepted Answer · 2016-03-05 09:57:50Z

3

I think I've found the answer, see the CSS 3 transition spec:

Since this specification does not define when a style change event occurs, and thus what changes to computed values are considered simultaneous, authors should be aware that changing any of the transition properties a small amount of time after making a change that might transition can result in behavior that varies between implementations, since the changes might be considered simultaneous in some implementations but not others.

I tried to add a little delay to let the browsers notice the style differences and it works consistently. It seems that some browsers are executing a setTimeout 0 really faster than others :-)

    setTimeout(function() {
        document.querySelector('.std--blue').classList.toggle('std--hidden');
    }, 17);

edited Mar 5, 2016 at 9:57

answered Mar 4, 2016 at 21:06

thomas.g

3,9423 gold badges31 silver badges36 bronze badges

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

Comments

Redu · Accepted Answer · 2021-12-18 19:00:35Z

To trigger a transition you don't really need a class to toggle. This is important since you may not be able to set up classes dynamically to toggle beforehand. In other words you may just need to alter some CSS attributes to trigger the transitions. However yes... you need to satisfy the followings;

In order your <div id="blue"></div> element to animate, it must carry the std class where the transition is defined. So first we should do like blue.classList.add("std");
You need to perform the task asynchronously. Refreshing the DOM asynchronously is best done by the requestAnimationFrame() function.

var blue = document.getElementById("blue");
blue.classList.add("std");
blue.style.backgroundColor = "blue";
blue.style.opacity         = 0;

document.querySelector('button')
        .addEventListener( 'click'
                         , _ => requestAnimationFrame(_ => blue.style.opacity = 1)
                         );

.std { width:100px;
       height:100px;
       opacity: 1;
       transition: opacity 5s;
}
.std--red { background-color: red;}

<button>click here</button>
<div class='std std--red'></div>
<div id="blue"></div>

Community · Accepted Answer · 2017-05-23 12:23:44Z

0

It seems you have to trigger the transition by making a reference to the style. I simply added this line (even into console.log is ok)

document.querySelector('.std.std--blue').style.width = '20';

and here it works: jsfiddle

NB: I am using FirefoxDeveloperEdition.

I have followed this solution:

CSS Transitions do not animate when you add or remove class, It will only animate when you change the CSS properties.

Complete script

<script>

setTimeout(function() {
    // everything works fine for the red div
    document.querySelector('.std--red').classList.toggle('std--hidden');
}, 0);


document.querySelector('button').addEventListener('click', function(e) {

    var template = `<div class='std std--blue std--hidden'></div>`;
    document.querySelector('.insert-here').innerHTML = template;
    document.querySelector('.std.std--blue').style.width = '20';
    setTimeout(function() {

        document.querySelector('.std.std--blue').style.width = '100';
        document.querySelector('.std--blue').classList.toggle('std--hidden');
    }, 0);

    });
</script>

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Mar 4, 2016 at 20:23

silviagreen

1,7291 gold badge18 silver badges43 bronze badges

4 Comments

thomas.g Over a year ago

Try it outside fiddle (or alike), directly inside a browser, it doesn't work for me. But it works inside fiddle, codepen, etc...

thomas.g Over a year ago

That's not true, the first animation is triggered.

thomas.g Over a year ago

Your code does not seem to answer my question about why does it work for the red div but not for the blue div ?

silviagreen Over a year ago

CSS Transitions do not animate when you add or remove class, It will only animate when you change the CSS properties. I added it also in the answer.

nodws · Accepted Answer · 2016-03-04 20:33:34Z

-1

You must set a value to the timeout so you give time for the element to be inserted in the DOM (must exist before calling document.querySelector)

setTimeout(function() { document.querySelector('.std--blue').classList.toggle('std--hidden')},100);

you don't need the first timeout

onload = function() {
document.querySelector('.std--red').classList.toggle('std--hidden');

 document.querySelector('button').addEventListener('click', function(e) {
   var template = "<div class='std std--blue std--hidden'></div>";
   document.querySelector('.insert-here').innerHTML = template;
   setTimeout(function() { document.querySelector('.std--blue').classList.toggle('std--hidden')},100);
    });
}

 .std {
            width:100px;
            height:100px;
            opacity: 1;
            transition: opacity 5s;
        }

        .std--hidden {
            opacity: 0;
        }

        .std--red {
            background-color: red;
        }

        .std--blue {
            background-color: blue;
        }

<button>click here</button>
<div class='std std--red std--hidden'></div>
<div class='insert-here'>
</div>

edited Mar 4, 2016 at 20:33

answered Mar 4, 2016 at 20:19

nodws

1,12515 silver badges18 bronze badges

8 Comments

thomas.g Over a year ago

Sorry I can't accept your answer as it does not answer the question. I know that I can change the delay, I just don't understand why it doesn't work in the second case.

thomas.g Over a year ago

If you try running the code outside of jsfiddle (open the HTML inside a browser), do you see the first animation if you don't place a setTimeout ? I don't.

nodws Over a year ago

Yes code runs on document Load, tested in IE11, Firefox, Chrome and Chrome Canary

thomas.g Over a year ago

On my computer it works under Safari Version 9.0.3 (11601.4.4) but is working randomly under Chrome Version 48.0.2564.116 (64-bit) and doesn't work under Firefox Dev Edition 46.0a2 (2016-03-04). :-(

nodws Over a year ago

try to wrap your code in an event listener onload = function() { //code } }

|

Collectives™ on Stack Overflow

Trying to trigger a CSS transition using JavaScript

EDIT

4 Answers 4

Comments

Comments

4 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

4 Answers 4

Comments

Comments

4 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related