Do CSS3 transitions switch when hiding an element?

Question

I noticed that (using jQuery in Chrome 43) transitions are disabled when the element has display: none . Is this a standardized behavior across browsers, a feature of jQuery, or is it something that cannot be relied on for production?

The transition is activated when the CSS statements to be animated change in a deferred function. Take a look at this JSFiddle . Uncomment line 3 or 6 to see it yourself.

---

DECISION:

This behavior cannot be used in production, as it seems to be the product of an optimization / design choice rather than a specification (as requested by @Andriy Horens). Instead, you should turn on and off the animation ( transition-property: none ) with the class. Inability to use a class that was made unreliable for me in Chrome 43. To update some CSS instructions, Chrome also required separate frames (defer code with a timeout of 0). Just put aside everything related to animation if you want to save development time.

Answer 1

According to MDN :

Display

In addition to many different types of boxes, a value of none allows you to disable the display of an item; when you use none , all descendant elements are also disabled. The document is displayed as if this element does not exist in the document tree.

So, I think that elements with a display set to none will not be displayed at all in all browsers, and so the transition or any other visual effect will not be applied.

You can also test yourself by subscribing to the transitionend event:

 $(element).on("transitionend", function () { console.log("transition ended"); }); 

---

Update:

This is also the w3c value:

And some values ​​(such as display: none, display: contents and box-suppress: discard) cause the element and / or its descendants to not generate any fields at all.

If the fields are visual representations of an element. And the transition is definitely part of the visual presentation, as it can also affect the layout, for example. when changing the relative position of the element with the transition applied.

---

Here is another example of how different the animations of the elements with display : none and visibility : hidden other words, the rendering element and the non-display one.

JSFiddle DEMO