Setting collapse panel height to 0 disables animation

[neberhardt123]

When I set ContentHeight for a CollapsePanel component to 0, it disables the open and close animation for it. Is there a way to retain the animations when I set the height to auto?

[majorimi]

@neberhardt123 yes this is "known limitation". This was expressed in the Demo app. Also XML comments explains it. (see both below)

The problem is CSS not able to calculate the transition speed if Height is not a fixed value. Or something like that, however I'm not a CSS expert. I can try to look into it, but as mentioned I'm not a CSS guru... If you have any "simple" trick to solve this limitation that would be appreciated. Thanks.

/// <summary>
/// Determines to apply CSS animation and transition on Collapse state changes or not.
/// Note: in case of `auto` height some animation won't work.
/// </summary>
[Parameter] public bool Animate { get; set; } = true;

[majorimi]

@neberhardt123 Looked into this CSS issue and it seems there are few solutions. Unfortunately some of them does not trigger a DOM reorder (re-render) so leaves empty space on UI which is not good. So basically 1 possibility exists....

Instead of height another property max-height has to be animated. One big problem is max-height must be gather than auto calculated value. To make it work for everyone I had to introduce MaxAllowedContentHeight property which must be set be panel for your content and value is "best guess". No guaranty of auto value won't be gather. Also if you give it a huge number then animation will be super quick (time is fixed size is growing). So even animation speed won't be fixed...

But updated CollapsePanel animation when height is Auto CSS cannot calculate transition speeded. So need to animate max-height but it requires grater value then "auto" value... You can pull down branch: fix/collapse-animation and try it out locally. Test app now has this:

If you think it is acceptable, then I will merge PR and can release the change with v1.6.0. Let me know...

[neberhardt123]

I tried it out and it looks good. The animation can get a little delayed if you make the max-height too large, but it isn’t too much of a problem. From: Imre ***@***.***> Sent: Thursday, October 28, 2021 7:19 AM To: ***@***.***> Cc: Nathan J. ***@***.***>; ***@***.***> Subject: Ex: Re: [majorimi/blazor-components] Setting collapse panel height to 0 disables animation (Issue #99) @neberhardt123<https://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fneberhardt123&data=04%7C01%7Cnjeberhardt%40cpp.edu%7C4e0c488f8d024bb2b6fc08d99a1df590%7C164ba61e39ec4f5d89ffaa1f00a521b4%7C0%7C0%7C637710275767137053%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=YKklP66k8OSTlKY9Dx51YDFr0fwuvExr5%2B0byBqCRmk%3D&reserved=0> Looked into this CSS issue and it seems there are few solutions<https://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcss-tricks.com%2Fusing-css-transitions-auto-dimensions%2F&data=04%7C01%7Cnjeberhardt%40cpp.edu%7C4e0c488f8d024bb2b6fc08d99a1df590%7C164ba61e39ec4f5d89ffaa1f00a521b4%7C0%7C0%7C637710275767137053%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=ZjE20fhiSQdmbxGLB%2B%2FyxtDLHbf32zZZdAB2IbwnAV4%3D&reserved=0>. Unfortunately some of them does not trigger a DOM reorder (re-render) so leaves empty space on UI which is not good. So basically 1 possibility exists.... Instead of height another property max-height has to be animated. One big problem is max-height must be gather than auto calculated value. To make it work for everyone I had to introduce MaxAllowedContentHeight property which must be set be panel for your content and value is "best guess". No guaranty of auto value won't be gather. Also if you give it a huge number then animation will be super quick (time is fixed size is growing). So even animation speed won't be fixed... But updated CollapsePanel animation when height is Auto CSS cannot calculate transition speeded. So need to animate max-height but it requires grater value then "auto" value... You can pull down branch: fix/collapse-animation and try it out locally. Demo app now has this: [image]<https://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F7632824%2F139273920-fc4e716e-5d25-410f-a578-ddc88d7ebfca.png&data=04%7C01%7Cnjeberhardt%40cpp.edu%7C4e0c488f8d024bb2b6fc08d99a1df590%7C164ba61e39ec4f5d89ffaa1f00a521b4%7C0%7C0%7C637710275767147050%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=JhRYvtg%2F%2B6Fm4TXvM4cTMlae94wf1az2%2B0Li%2F3Yjeiw%3D&reserved=0> If you think it is acceptable, then I will merge PR and can release the change with v1.6.0. Let me know... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmajorimi%2Fblazor-components%2Fissues%2F99%23issuecomment-953894411&data=04%7C01%7Cnjeberhardt%40cpp.edu%7C4e0c488f8d024bb2b6fc08d99a1df590%7C164ba61e39ec4f5d89ffaa1f00a521b4%7C0%7C0%7C637710275767157043%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=F1ltlSwOs9enkzsmEKoeo9cPo9wxadnOsgENnBDD2eQ%3D&reserved=0>, or unsubscribe<https://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAKBS2AEGYNGGDR34WYKMSJ3UJFSYFANCNFSM5GUEK2KQ&data=04%7C01%7Cnjeberhardt%40cpp.edu%7C4e0c488f8d024bb2b6fc08d99a1df590%7C164ba61e39ec4f5d89ffaa1f00a521b4%7C0%7C0%7C637710275767157043%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=hhvY%2BTVSoov9zawqAc1%2BdfbpwaYKv3bmVN4G4yMAE70%3D&reserved=0>. Triage notifications on the go with GitHub Mobile for iOS<https://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fapps.apple.com%2Fapp%2Fapple-store%2Fid1477376905%3Fct%3Dnotification-email%26mt%3D8%26pt%3D524675&data=04%7C01%7Cnjeberhardt%40cpp.edu%7C4e0c488f8d024bb2b6fc08d99a1df590%7C164ba61e39ec4f5d89ffaa1f00a521b4%7C0%7C0%7C637710275767167037%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=6QjWnGWX6vcIDoMIUtY2BqmGqTT2%2FOQHtjstX7aYssE%3D&reserved=0> or Android<https://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.github.android%26referrer%3Dutm_campaign%253Dnotification-email%2526utm_medium%253Demail%2526utm_source%253Dgithub&data=04%7C01%7Cnjeberhardt%40cpp.edu%7C4e0c488f8d024bb2b6fc08d99a1df590%7C164ba61e39ec4f5d89ffaa1f00a521b4%7C0%7C0%7C637710275767167037%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=y0QcKFdUKNFEAHlKFnDNe5GZfYamU10sfrErL7W1f2s%3D&reserved=0>. CAUTION: This email was not sent from a Cal Poly Pomona service. Exercise caution when clicking links or opening attachments. Please forward suspicious email to ***@***.******@***.***>.

[majorimi]

Yes that is a known problem of animating max-height property. When the Max value is much largen then the auto calculated value then speed of animation will be "calculate" based on that large px value. And since only auto size and its content is visible only on UI. But animation speed is for a larger value so it is collapsing "non-visible area" first. So it seems doing nothing (lagging) and then the smaller visible area will collapse quickly... For opening it is similar just reversed.

This issue is mentioned in that article. Also added XML comment to explain this. It can be mitigated by "guessing" the max-height value as close as possible to the auto calculated value... (Might not that easy to do)

Ok merged this change to RC 1.6.0. I will release new packaged in the next few weeks.