Smooth collapsible content

How-to Discussions
1

Hi, I’m currently using the Visibility attribute in UX to hide/show a piece of content underneath its image, which are all in a StackPanel that needs to accommodate for the collapsible content when it is set to visible. My question is; how can I do this smoothly? i.e. add a transition animation to slowly ease in the new content.

I’ve tried changing the height inside the toggle rather than visibility - this works well although the collapsible content can be varying heights, and if I don’t hard code the initial height it will stick to 0 after being toggled.

Any ideas?

Cheers

2

Hi!

This is a good use case for <LayoutAnimation> - see these links:

https://www.fusetools.com/learn/fuse#-layoutanimation-and-multilayoutpanel-

https://www.fusetools.com/community/examples/animatedlist

3

Thanks! Took me a few tries to get it into the right panel but it works very nicely. Next problem: the text in the new content is rendered on top of the next image while it plays the LayoutAnimation, is there a z-index or similar variable?

4

The Z-order is determined by the order in the UX file. Higher “up” in the UX-file, is higher “up” in the Z-order. Like layers in photoshop.