Comments on: So, you’d like to animate the display property

By: Jonas

Jonas — Tue, 20 Dec 2022 06:05:00 +0000

You are right, but since when?
Guess I am old.
https://greywyvern.com/?post=337
Here is it solved by using delay. But it is 11 years old.

By: Louis Lazaris

Louis Lazaris — Tue, 20 Dec 2022 01:52:33 +0000

The most popular article on my website is about this topic: https://www.impressivewebs.com/animate-display-block-none/

People seem to want to do this a lot, so I can see why it’s being considered as a feature of CSS. My solution uses JS, so it’s not the greatest. But so far I haven’t seen a pure CSS one that works.

By: Ian

Ian — Sun, 18 Dec 2022 06:32:21 +0000

In reply to Jonas. In my experience, visibility toggles at the start of a transition only if its value is to become visible. If its value is to become hidden, it toggles at the end of a transition. Therefore, its transition does not need to be delayed.

By: Jonas

Jonas — Fri, 16 Dec 2022 04:49:12 +0000

Interesting that they choose a different approach than visibility. Visibility toggles at the start of a transition, so you often have to delay its transition for the others to complete.
This now sounds like a special case, when transition to none, at the end, when transition to block at the start. It does make sense, but will they alter it for visibility as well?

Your example with the hover won’t work, as the element will not be there to be hovered. What would work is, when the parent is hovered, the child can then get display block applied.

By: Oleg)

Oleg) — Thu, 15 Dec 2022 21:57:37 +0000

In reply to hygorbudny. Hi! Transparency creates spacing

By: hygorbudny

hygorbudny — Thu, 15 Dec 2022 20:43:38 +0000

We could do the same effect using ’opacity’ and ’visibility’ combined, couldn’t we? like ’opacity: 0; visibility: hidden’. But yeah, I like the direct approach of the display property. In some cases, this type of redundancy, sounds nice!

By: Oleg)

Oleg) — Thu, 15 Dec 2022 20:32:10 +0000

We wait!