feat: allow animating to display: none;

[kerryj89]

• We can now animate to display: none; https://www.youtube.com/watch?v=vmDEHAzj2XE
• It's a relatively new feature, but since Tailwind v4 bundles modern features that even browsers 2 years ago can't handle, I think it would be safe to include?
• While we can animate to display: none, I am not sure how to animate back to it's original display. I have tried using initial, inherit, unset, and revert but they don't reset to the display set for the animated element by the css author, so it's a one way animation at the moment. We can't assume display: block;, it could be using flex, grid, or any other display
  • Maybe reversing animation could work here?
• I called it hidden-out since hidden is Tailwind's display: none; class.
• Might be a bit extra as far as using css variables just to do this, but since everything else was using css variables I stuck with that.

[Wombosvideo]

Is there any documentation regarding browser support for using display: none in @keyframes?

[Wombosvideo]

Other than browser support, I think this is a great idea. If you can get it to work for in too, that would be even better!

[kerryj89]

Is there any documentation regarding browser support for using display: none in @Keyframes?

https://caniuse.com/?search=allow-discrete
Ah, good catch - Firefox doesn't support it yet. I have a feeling they will soon considering pretty much every overlay/dismissive UI would benefit and Chrome/Safari supports it. If we allow this I guess we will need to warn about that as it can be a no-go for many.

If you can get it to work for in too, that would be even better!

Actually, after reducing it to simple plain css, I believe I have it working. I was probably messing up somewhere with setting it up. I'll push another commit with what should work based on the example below.

https://jsfiddle.net/hL19pfj8/

[kerryj89]

👆 Correcting my former misunderstanding I think this will allow animating in to the authored css display from a none state. I'll try to remember to test it out later.

I also renamed it from hidden-out to display-out since hidden-in wouldn't make much sense. I know hidden is Tailwind vernacular for none, so maybe those of you in TW land would still prefer that? I tried to respect the pattern of using the same name so I didn't go with shown and hidden. If anyone has any suggestions feel free to suggest.

[Wombosvideo]

Hey there! Been an intense three weeks for me but this is still open, so I decided to take a look again. One thing I don't like is the display: var(--tw-enter-display, ); but I can't think of a nicer solution. Using only var(--tw-enter-display) would work too, I guess. I will set up a testing environment and try to figure it out

[WarningImHack3r]

Hi both of you
Tailwind 4.1.5 added built-in transitions for the display property, maybe you could leverage this for this issue? Didn't read all of it, but it looks like this change could help you

[kerryj89]

Hi both of you Tailwind 4.1.5 added built-in transitions for the display property, maybe you could leverage this for this issue? Didn't read all of it, but it looks like this change could help you

Hello! I don't have time at the moment to check it out, but if their implementation works with tw-animate-css then let's go with that. I'm guessing you will be able to use it within custom animation @Keyframes also?

[stevenvachon]

Maybe not display: none as it'd affect a11y. Instead, from or to position: absolute.