If I wanted to animate the transition from displaying and not displaying a component in a flex container when the display
property is changed, how would I go about it in my css theme?
And how would I target this to only certain flex containers?
If I wanted to animate the transition from displaying and not displaying a component in a flex container when the display
property is changed, how would I go about it in my css theme?
And how would I target this to only certain flex containers?
display
doesn’t support CSS transitions:
That’s a bummer!
In case anyone is still trying to look at a way to do this I managed to achieve using CSS transitions by instead utilising a relative x y coordinate container and changing the x/y values of the component along with setting a style for “transition: all 0.5s linear”
you can use opacity
I managed this:
The toggle and collapsable components are in flex column containers with border set for visual cues.
The collapsing components have an addition to props.style
:
transition: flex-basis 500ms
The collapsing components have the POSITION
props set to
grow : 0
shrink : 0
basis : <set by expression binding to `0px` or `300px` based on toggle value.>
display : true
Ideally I would have liked to have it toggle between 0px
and auto
but that didn't give me the same level of control. I'll continue to investigate.
My reason for trying this rather than the accordian component was that I can avoid having to create individual views for each accordian section. Maybe I should just do that.
There is not a perfectly clean way to transition between 0px
and auto
for height, width, or basis. You can however leverage some other CSS properties like max-height
. So in your example you could set basis to auto
and have a maxHeight
style property toggle between 0px
and 300px
on a binding. See my example in a video below. I'll also link an article that talks about the max-height
solution and others.
https://css-tricks.com/using-css-transitions-auto-dimensions/
Thanks for that but what exactly is maxHeight
doing? It's not a CSS property (whereas max-height
is).
react (which perspective uses) can turn (most)properties from camelCase to kebab-case.
so maxHeight is the same as max-height
First time I've heard of that! I love it.
camelCase
PasalCase
snake_case
kebab-case
xd all quite funny names tbh
PascalCase* oopsie
Also you missed PsYcHoCaSe
What's funny about Pascal ?
Me, too.
Nope. Not valid identifiers anywhere else in the IT world.
It is in CSS.
Oops, I missed your "anywhere else".
That's what I meant by "anywhere else". They are only valid in CSS. I don't like to use the word "stupid", but this CSS specification choice is utterly, unbearably, inconceivably stupid. Those responsible should be shamed and shunned.
its used all over the web, so yh javascript, css and html
It's better than allowing spaces in names. A practice that is so shameful that (afaik) it doesn't even have a name. Yet is allowed in lots of places.