Hardcoding animations on conditional rendering?

Alfred · 2024-05-06T10:38:30.662+00:00

Hi,Has someone achieved hardcoding CSS animations on elements which utilise conditional rendering "show"? We have multiple features and components relying on conditional rendering and where the user experience would be improved. Sidepanels, toasts, dialogs, dimmers, dropdowns etc. We have chosen conditional rendering "show" instead of handling display: none/flex.

Alfred
1 year ago
Hi,
Has someone achieved hardcoding CSS animations on elements which utilise conditional rendering "show"? We have multiple features and components relying on conditional rendering and where the user experience would be improved. Sidepanels, toasts, dialogs, dimmers, dropdowns etc. We have chosen conditional rendering "show" instead of handling display: none/flex.
Victor Giron
1 year ago
I am also having this challenge, for drawers for example, since the element is show=false, the animation doesn't work
Alfred
1 year ago
Yes, without any animation it makes the user experience look a bit rough also for adding/removing items in repeated lists
Lucas G
1 year ago
To animate with the show/hide you'll have to handle how the classes for the animation get applied
One way to do it is via workflows
https://editor.nordcraft.com/projects/shared_components/branches/playground/components/Animate%20show%20hide
Lucas G
1 year ago
Since the typical way to animate is to add a class, we have to first handle the condition to show then add the class
Alfred
1 year ago
I guess you should be able to trigger the workflow from "on load" if you have a sidebar component. That handles the component's internal classes, so that the component does not have to be handled with both a show attribute and show/hide. I'll try to test it this afternoon.

Hardcoding animations on conditional rendering?

Alfred

Victor Giron

Alfred

Lucas G

Lucas G

Alfred