Changing the display attribute nullifies opacity transitions [duplicate]

Question

Using JavaScript to change the opacity of an element with transition: opacity 1s, you expect the transition to take one second, which it does here:

onload = e => {
  var p = document.getElementsByTagName("p")[0];

  p.style.opacity = 1;
};

p {
  opacity: 0;
  transition: opacity 1s;
}

<p>
Lorem ipsum...
</p>

However, if the element has display: none and you first change it to display: initial (in order to see it) before changing the opacity the transition no longer works, which you can see here:

onload = e => {
  var p = document.getElementsByTagName("p")[0];

  p.style.display = "initial";
  p.style.opacity = 1;
};

p {
  display: none;
  opacity: 0;
  transition: opacity 1s;
}

<p>
Lorem ipsum...
</p>

Why is this?

Note: I am not using a transition on the display attribute and neither am I looking for a workaround for that.

Answer 1

tldr: You cannot use the transition property with the display property. And yes, you can't use the transition property on any other css property of an element whose's current display property is none either.

---

The cleanest workaround for this would be to simultaneously transition the width property and the opacity property together.

Check this JSFiddle to see how you can use the width and height property to replicate the display:none property of not letting the element take any space in the document flow.

The <span> element is just for demonstrating how the <p> tag does not take any space while it's hidden.

You can also check out the code in the following Snippet but as you mentioned, the transition doesn't work here for some weird reason.

var p = document.getElementsByTagName("p")[0];

p.style.width = "50%";
p.style.height = "auto";
p.style.opacity = 1;

html, body{width: 100%; height: 100%; margin: 0; padding: 0;}
p {
  width: 0;
  height:0;
  opacity: 0;
  transition: width 2s, opacity 3.5s;
  float:left;
  margin: 0;
}

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis culpa nobis dolorem voluptates ut odio numquam officia provident quos labore, natus sint doloribus ducimus similique aspernatur, enim, voluptatibus vel facere!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, adipisci? Quidem laboriosam sunt, qui non ea placeat laborum deserunt consequatur consequuntur vel, officiis magnam. Vitae officiis, quidem doloribus nesciunt voluptatem!
</p>
<span>Right side text</span>

But if you have to use display:none, then as shown in this css article, you can just use the setTimeout() workaround to set the transition property after the display property is toggled instead of during the display property toggling like this:

var p = document.getElementsByTagName("p")[0];
p.style.display = "block";

setTimeout(function(){p.style.opacity = 1;},1000);

p {
  display: none;
  opacity: 0;
  transition: opacity 1s;
}

<p>
Lorem ipsum...
</p>

Answer 2

It seems like the problem is that the transition happens (or tries to happen) during the process of the display attribute changing (meaning that it is still none and the transition thus doesn't work). The transition could technically have started while the element had display: none and became visible only when the process of changing it to display: initial had finished, since the transition is one whole second while the change of display attribute is a fraction thereof. But that is simply not the case, it seems.

It is possible to change the opacity of an element that has display: none before changing it to display: initial as you can see here so that is clearly not the problem:

var p = document.getElementsByTagName("p")[0];
p.style.opacity = 0.3;
p.style.display = "initial";

p {
  display: none;
  opacity: 0;
  transition: opacity 1s;
}

<p>
Lorem ipsum...
</p>

It is also possible to change it afterwards (of course), so that seems to only leave our hypothesis as the only possibilty.

To make sure that the first process has finished before you start the transition, you can use a small delay like this and voilà, it works:

var p = document.getElementsByTagName("p")[0];

p.style.display = "initial";
setTimeout(function() {
	p.style.opacity = 1;
},100);

p {
  display: none;
  opacity: 0;
  transition: opacity 1s;
}

<p>
Lorem ipsum...
</p>