Opacity fade works only when defered

Question

I would like to make a div appear with fade effect :

<div id="toto" style="background:red;width:200px;height:200px"></div>

The simplest way I know is with CSS properties "transition" and "opacity". In my mind, this code should works (but it doesn't) :

document.getElementById("toto").style.opacity = 0;
document.getElementById("toto").style.transition = "all 5s ease";
document.getElementById("toto").style.opacity = 1;

(See at : http://jsfiddle.net/87q44ysg/1/#share)

Anyone know why ?? I have found this hack but I can't explain why it works in this case only... :

document.getElementById("toto").style.opacity = 0;
window.setTimeout(function(){
  document.getElementById("toto").style.transition = "all 5s ease";
  document.getElementById("toto").style.opacity = 1;
}, 1);

(See at : http://jsfiddle.net/36009t1x/#share)

Thank you !

Why not set the opacity on the div to start with or set it in css? — Huangism, Sep 25 '14 at 20:38

luke · Accepted Answer · 2014-09-25T20:58:53.460

First case

document.getElementById("toto").style.opacity = 0;
document.getElementById("toto").style.transition = "all 5s ease";
document.getElementById("toto").style.opacity = 1;

This happens because each line in above javascript is invoked immediately and it is similar to setting these css rules:

#toto {
    opacity: 0;
    transition: all 5s ease;
    opacity: 1;
}

as you can see the second occurence of opacity will override the value 0, so in result it will be 1.

#toto {
    transition: all 5s ease;
    opacity: 1;
}

There is no animation in this case just static opacity that isn't going to change.

Second case

document.getElementById("toto").style.opacity = 0;
window.setTimeout(function(){
  document.getElementById("toto").style.transition = "all 5s ease";
  document.getElementById("toto").style.opacity = 1;
}, 1);

In this case you initially set the opacity to 0. And after 1ms you change the css rules, so there is a change in opacity from 0 to 1. That's why the animation was fired.

Regards.

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

You should avoid setting styles in plain Javascript and move this to CSS. As for your question, it's not standardised and each browser can do whatever developers think is right. Probably, transition property is not really applied until reflow or something like this. See this question for more detailed testing: Clean way to programmatically use CSS transitions from JS?

edited May 23 '17 at 11:49

Community

1
1

answered Sep 25 '14 at 20:50

Artem

400
2
7

score 0 · Answer 3 · answered Sep 25 '14 at 21:12

0

You need to play with timeouts in this one.

Try this: DEMO

Play with the values if you want, to achieve your desired effect.

You could achieve the same result with setInterval, but i prefer setTimeout in this one.

  /*Fades in an element. Params: A DOM Element*/
  var fade = function (node) {
    var level = 0;
    var step = function ( ) {
      node.style.opacity = level;
      if (level < 1) {
        level += 0.1;
        setTimeout(step, 50); //increase the value by 0.1 every 50ms
      }
    };
    setTimeout(step, 0); //calls immidiatelly (4ms after)
  };
  fade(document.body);

Cheers!

answered Sep 25 '14 at 21:12

gdyrrahitis

5,598
3
23
37

I don't like this solution, CSS3 transition is here to do the job! – Klitzounet Jan 30 '15 at 11:10
Ok, I agree that with CSS this unit of work is an easy task. But the question is about the js way to solve this issue. Also for older browsers the CSS3 transitions/animations are useless. One good way to go is to use CSS3 for animations for modern browsers and jQuery as a fallback mechanism (or pure JS if you don't want to add jQuery, but it would be pain, jQuery is already cross-browser tested) – gdyrrahitis Jan 30 '15 at 14:08

Mandera · Answer 4 · 2014-09-25T21:09:41.717

-1

This works fine, does that help?

setTimeout(function() {document.getElementById("toto").style.opacity = "1";},500);

#toto {
    transition: opacity 5s;
    opacity: 0;
}

<div id="toto" style="background:red;height:200px"></div>

edited Sep 25 '14 at 21:09

answered Sep 25 '14 at 20:54

Mandera

2,647
3
21
26

I had to add a timeout for the snippet here, but you shouldn't need that. – Mandera Sep 25 '14 at 20:56
Yes interesting comment but I prefer either full JS (no CSS) or full CSS (just switching css class) solution. Thx anyway ! – Klitzounet Jan 30 '15 at 11:14

Opacity fade works only when defered

4 Answers4