animation of opacity does not work unless I use a setTimeout

Question

Can somebody explain why the following code does not work without the setTimeout?

<html>
 <script src="js/jquery.js"></script>
 <style> 
div {
 height:400px;
 background-color:red;
 opacity:1;
 transition:1s;
}
</style> 
<div id="foo">toto</div>

<script>
                        $("#foo").css("transition","0s");
                        $("#foo").css("opacity",0);
                        setTimeout(function(){
                            $("#foo").css("transition","5s");
                            $("#foo").css("opacity",1);             
                        },1);
</script>
</html>

The script is supposed to reset the opacity of div to 0 then gradually reach maximal opacity in 5 seconds. Without the timer there is no animation : the opacity is 1. I know I could use frames for animation but this was the first thing that goes out of my head at the time and now I'm wondering why this does not work (without the timer)

Working (with timer)

$("#foo").css("transition","0s");
 $("#foo").css("opacity",0);
   setTimeout(function(){
  $("#foo").css("transition","5s");
  $("#foo").css("opacity",1);    
 },1);

div {
 height:400px;
 background-color:red;
 opacity:1;
 transition:1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="foo">toto</div>

Not working

$("#foo").css("transition","0s");
 $("#foo").css("opacity",0);

  $("#foo").css("transition","5s");
  $("#foo").css("opacity",1);

div {
 height:400px;
 background-color:red;
 opacity:1;
 transition:1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="foo">toto</div>

removing the setTimeout and adding it will produce the same results.. — EugenSunic, Sep 21 '19 at 14:13
The updates to the element `.style` object don't immediately trigger a redraw of what's in the window. Browsers generally let the JavaScript run and only bother to repaint when the script is done. — Pointy, Sep 21 '19 at 14:15
You need to use animation instead of transition if you want to run an animation right away. — Kokodoko, Sep 21 '19 at 15:06

score 0 · Answer 1 · 2019-09-21T16:29:11.910

0

Simply because your script is executed at the same time of the page rendering, which means, your page is rendered with those styles, so there are no changes, then no transition, when you add a setTimeout you delay the changes after the rendering then the css transition animation get triggered.

In this case you can use the onLoad event, to set your changes after the page is loaded and rendered.

_ If you want a pure CSS solution, follow this thread : css3 transition animation on load, without javascript ?

$(window).on('load', function () {
  $("#foo").css("opacity",1);        
});

div {
 height:400px;
 background-color:red;
 opacity:0;
 transition:5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="foo">toto</div>

edited Sep 21 '19 at 16:29

answered Sep 21 '19 at 16:19

This was a simplified sample. The style is changed when the div is entering the viewport. – v1nce Sep 21 '19 at 16:33
Simple or complicated the result will be the same, you need to wait till the page is fully loaded, to apply your changes, since the 'onload' event – Sep 21 '19 at 16:36
I don't think this is a problem of when the func is called : you can run the func on a event (or after the loading has completed) and the result would be the same. The initial opacity is set to 1 by style (for non js browser). Then I set it to 0 then 1 in one go in the func. I expected the browser to understand it should animate from 0 to 1. Which is not the case. The opacity = 1 overwrites (or push out from cache) the opacity = 0 if you don't give the browser a break by using the timeout. – v1nce Sep 21 '19 at 18:12
Well you asked why, told you (what seems to me) to be the reason ... Now it's up to you to deal with the browser execution life cycle ... Any way if you find any thing interesting keep me in touch, good look ;-) – Sep 21 '19 at 19:01

animation of opacity does not work unless I use a setTimeout

1 Answers1