Folding Transitions#
Folding Vertically#
transition-fold-y translate the max-height property and apply overflow: hidden to the transitioning element to create an folding/unfolding accordion effect.
Basic Example#
Properties
Show
Providing Full Height#
The animation can be refined by providing a value that is closer to the actual full height of the element. This is especially relevant when using folding animation with accordions, as accurate height will prevent layout after the accordions from jumping up and down during the transition.
The default full height value is 3000px, which accomodates most use-cases. Extreme timing functions are used to create an combined result of an ease-in timing for entering, and an ease-out timing for leaving.
When using relatively more accurate full height value, the timing function should be set to ease-in-out.
The value can be customised via setting a CSS variable --transition-fold-y-full on the transitioning element.