Running into an issue while messing with the allow-discrete for animation feature
I'm need to build a collapsable alert message and thought I would try to mess with
transition-behavior: allow-discrete; to switch the alert message to display none when it's collapsed. The issue I'm running into is going back from display none to display block. I want to delay that animation a few milliseconds but it seems like the delay is ignored for display. Does anyone know if delay doesn't work with allow-discrete?
I've tried using @starting-style to set it's display to none but that seems to be preventing it from going back to display block.
Here is an example of what I'm doing. It looks fine when it collapses but switching back to the default state causes the text to wrap before the animation ends because it is immediately switching back to display block instead of being delayed until the alert grows to full width.
https://codepen.io/shborrowman/pen/YzopWXE4 Replies
If I remember correctly, what
allow-descrete is doing is allowing transitions to happen at all if there are discrete animations, which display is one of.
For the transitions to work though, the element has to "exist", so we can't delay it turning on, and you can't have it display actually transition, it's either on or off.
That means it has to be on as soon as the other ones start, so that those things can "exist" and do their transition. (like, you can't transition the opacity of something that has a display: none, right?).
What might be easier here (I haven't tested it though) is to use an animation instead, because you can delay the animation from running for as long as you want, so you can have the size of the element expand out, and then the animation kicks in.I thought it might be something like that but was hoping I was just missing something simple hah. Using keyframes was my second idea but thought I would see if it would be possible with allow-descrete and transition delay to just tell it to "exist" a little later.
would definitely come in handy if we could 😄
I feel like I could use that statement for a lot of things I wish css would be able to do hah. It's definitely getting much closer with some of these new features, though!
Might be a little hacky, but I can get around this by attaching the transition to the aria hidden attribute, which I want to add anyway, and then using a setTimeout to delay when the paragraph gets set back to display block. I usually try to avoid using both css and JS timing on the same animation but this doesn't seem too bad. The codepen link has been updated.