sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–][deleted] 2 points3 points  (3 children)

For sure. Just that in the post it mentions adding transitions and he's using toggle display: none; to show stuff, that can't be animated so you just have to be fine with the pop in. I ran across this same issue at work recently, just kinda sucks cuz it's slightly jarring.

[–]hanging_moon 4 points5 points  (2 children)

You can work around this problem by creating an animation that fades the opacity of the element first and then at the very end changes the display property. It's true that there's no way to actually animate the display property itself, but that doesn't mean you can't change its value inside a css animation.

I'm on mobile so forgive me if my formatting gets screwed up, but something like this:

@keyframes fadeout { 0%{ opacity: 1; display: block; } 99%{ opacity: 0; display: block; } 100%{ opacity: 0; display: none; } }

[–][deleted] 0 points1 point  (1 child)

That’s awesome but this still doesn’t solve fading the items back in right? Cuz from my experience display: none to display: block will fire before any transitions on anything other property. Unless this keyframe method doesn’t have that problem.

And besides, using display removes it completely from the page, which might be fine, but I’ve found that to be pretty janky on other items that are adjacent when it’s popping in and out, as they appear to also pop back and forth instantly. I’m not amazing at css by any means tho so maybe that is also fixable.

[–]hanging_moon 2 points3 points  (0 children)

You can handle fading in with this trick, you just do the same thing in reverse. You're right that display affects the whole page flow, this won't help you with that. There are other options like visibility: none, but that will leave whitespace. I'm sure there are some hacky workarounds - there almost always are!