# Use animation on check uncheck flex display property? **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [April 14, 2021, 9:08pm UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614 "2021-04-14T21:08:29Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [April 14, 2021, 9:08pm UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/1 "2021-04-14T21:08:29Z")
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? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [April 14, 2021, 10:15pm UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/2 "2021-04-14T22:15:59Z")
`display` doesn’t support CSS transitions: > ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [April 14, 2021, 10:19pm UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/3 "2021-04-14T22:19:11Z")
🥺 That’s a bummer! ---
**Author:** ![agibson](https://avatars.discourse-cdn.com/v4/letter/a/977dab/32.png) [@agibson](https://forum.inductiveautomation.com/u/agibson)\ **Post date:** [January 18, 2022, 5:35am UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/4 "2022-01-18T05:35:23Z")
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” ---
**Author:** ![lachguerabdallah](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lachguerabdallah/32/25558_2.png) [@lachguerabdallah](https://forum.inductiveautomation.com/u/lachguerabdallah)\ **Post date:** [January 18, 2022, 8:23am UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/5 "2022-01-18T08:23:51Z")
you can use opacity ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [June 26, 2023, 7:52pm UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/6 "2023-06-26T19:52:31Z")
I managed this: ![Homemade accordian](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/8/d8fc81f0a11a12a3e3240268c02933f42631ba74.gif) - 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 ```auto grow : 0 shrink : 0 basis : 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. ---
**Author:** ![nicoli.liedtke](https://avatars.discourse-cdn.com/v4/letter/n/ee59a6/32.png) [@nicoli.liedtke](https://forum.inductiveautomation.com/u/nicoli.liedtke)\ **Post date:** [June 26, 2023, 8:13pm UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/7 "2023-06-26T20:13:14Z")
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/](https://css-tricks.com/using-css-transitions-auto-dimensions/) [https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e8e8a51015e774f0eef0b6bc38a83e6023628a8d.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e8e8a51015e774f0eef0b6bc38a83e6023628a8d.mp4) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [June 27, 2023, 8:47am UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/8 "2023-06-27T08:47:11Z")
Thanks for that but what exactly is `maxHeight` doing? It's not a CSS property (whereas `max-height` is). ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 27, 2023, 9:17am UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/9 "2023-06-27T09:17:57Z")
react (which perspective uses) can turn (most)properties from camelCase to kebab-case. so maxHeight is the same as max-height ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [June 27, 2023, 10:15am UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/10 "2023-06-27T10:15:20Z")
> [@victordcq](#): > > kebab-case First time I've heard of that! I love it. 😜 ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 27, 2023, 11:08am UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/11 "2023-06-27T11:08:14Z")
camelCase PasalCase snake\_case kebab-case xd all quite funny names tbh ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [June 27, 2023, 11:40am UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/12 "2023-06-27T11:40:31Z")
PascalCase\* oopsie Also you missed PsYcHoCaSe ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [June 27, 2023, 12:21pm UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/13 "2023-06-27T12:21:11Z")
What's funny about Pascal ? 🤨 ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [June 27, 2023, 1:24pm UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/14 "2023-06-27T13:24:11Z")
> [@Transistor](#): > > First time I've heard of that! Me, too. > [@Transistor](#): > > I love it. Nope. Not valid identifiers anywhere else in the IT world. ☹ ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [June 27, 2023, 1:25pm UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/15 "2023-06-27T13:25:46Z")
> [@pturmel](#): > > Not valid identifiers anywhere else in the IT world. It is in CSS. Oops, I missed your "anywhere else". ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [June 27, 2023, 1:28pm UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/16 "2023-06-27T13:28:50Z")
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. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 27, 2023, 1:38pm UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/17 "2023-06-27T13:38:16Z")
its used all over the web, so yh javascript, css and html ---
**Author:** ![Tim\_Carlton](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tim_carlton/32/52835_2.png) [@Tim\_Carlton](https://forum.inductiveautomation.com/u/Tim_Carlton)\ **Post date:** [June 27, 2023, 1:59pm UTC](https://forum.inductiveautomation.com/t/use-animation-on-check-uncheck-flex-display-property/45614/18 "2023-06-27T13:59:27Z")
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.