Когда использовать
Animate meaningful layout changes without losing object identity or focus.
Решения для реализации
- Measure first rectangles before changing the order, then last rectangles in a layout effect after React commits.
- Use stable data keys to match the same item across positions. Animate an inverse transform to identity with WAAPI.
- Cancel previous Animation objects before starting a replacement and on unmount. If reduced motion is enabled, apply the final layout immediately.
- Keep keyboard focus on the same semantic element. A transform must not change logical DOM ordering or tab behavior.
Как проверить результат
- The same card travels between its old and new positions.
- Repeated reorder clicks interrupt cleanly.
- Focus and reduced-motion behavior remain predictable.