Transition after hiding flex child
I have 3 flex children in a row, set to 100% width, so it spaces evenly. Now, using js, I'm hiding one conditionally, and I'd like a short transition to make the change a little more organic, but I'm not sure how best to approach it.
What I've tried so far is to add
transition: width 500ms ease-in;
to all 3 of the flex items. The hope was that the expansion of width would trigger it, but it doesn't.
I'm not sure if it can be done, or if I've explained what I'm trying to do, but if anyone has a suggestion, I'd love to hear it.10 Replies
Transitioning
width and height does not work with % (and auto), sadly.
Since its flex, you could a) try flex-basis instead of width (but I think it won't work either) or b) set a very high px value, that can be transitioned then. width: 9999px; instead of width: 100%; if you then set width: 0px; it should transition.Setting a px width means the items aren't staying within their container. I did suspect it was an issue of using percentage, though, as it doesn't change to trigger the transition.
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
click on the element, I use
onclick because tw playground cannot add js hee flex: 1;
min-width: 0;
transition: flex-grow 1s;
Like this it at least still looks right (evenly split, stays in container), but the transition doesn't trigger. I've tried a few different ways (I have an eventlistener on a <select> that sets hidden=true on certain changes)on
<select>? you mean you have multiple <select> elements in one row?yeah, two select elements and an input. And on the first select element is an eventlistener that sets hidden=true on the second select
you have to wait for
transitionend before hiding it
https://developer.mozilla.org/en-US/play?id=e%2FJZp%2FnzLYsvstkzZjYrrZ5gWgsFlFGGL%2BDYhzjLYMBl4HzYMIeQYVJhze4FzXJ4WA2EHp2nthF5H2zWPlayground | MDN
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
click run first
right you are, I hadn't considered transitionend - thanks :)