ResponsiveAnimation

Since v3.7.0

How the switch between table and card layout is animated.

• false — no animation; the layout swaps instantly.
• 'fade' — cross-fade the grid as a whole.
• 'morph-rows' — travel each row from its table position to its card position.
• 'morph-cells' — travel each cell from its column to its stacked position in the card. Falls back to 'morph-rows' above 150 rendered cells.

The morph styles require element-scoped view transitions (Element.startViewTransition()); browsers without support fall back to the CSS keyframe fade.

type ResponsiveAnimation = false | "fade" | "morph-rows" | "morph-cells"

See Also

• ExpandCollapseAnimation for the expand/collapse equivalent