Use animation on check uncheck flex display property?

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:

:pleading_face:
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:
Homemade accordian

  • 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.

2 Likes

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/

2 Likes

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

2 Likes

First time I've heard of that! I love it. :stuck_out_tongue_winking_eye:

1 Like

camelCase
PasalCase
snake_case
kebab-case

xd all quite funny names tbh

2 Likes

PascalCase* oopsie
Also you missed PsYcHoCaSe

2 Likes

What's funny about Pascal ? :face_with_raised_eyebrow:

2 Likes

Me, too.

Nope. Not valid identifiers anywhere else in the IT world. :frowning_face:

It is in CSS.
Oops, I missed your "anywhere else".

1 Like

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.

1 Like