Panel - Animations

[joe-bell]

Expected Behavior

Panels (and indicators) should animate smoothly on open/close

Current Behavior

No animation provided, the current animation on Sky.com (not Toolkit) is janky and slow

Attempted Fixes

http://codepen.io/joebell/pen/yMyBEB

[steveduffin]

I've been looking at a similar issue with Select App basket which has toggles to show more information. The issue I had is that often the content gets longer than a screen length (on mobile etc). I went down the same route, only I used keyframe animation so I could animate max-height:100vh at 99% and swap out max-height for something much larger at 100% (300vh) but keep sensible timings.

Is there a context where a panel could contain content longer than one screen (a netbook for example)? If so you might want to look at something similar.

Thought I had an even better solution, swapping to max-height:none at 100% but IE11 & IE10 dropped a brick.

[MrDinsdale]

I think this is an improvement, the indicator animation looks much better. Personally not too keen on the content scaling but I think its subtle enough.

@steveduffin yes the max-height is problematic. We have a number of scenarios where the panel will be larger than the browser on mobile (also using a mobile). We could allow an opt out of the default CSS transition to allow more control with something like react-motion perhaps.

PS Changing the max height at 99% to a much larger size is both horrible and genius. :p