12 / 모션 / 직접 만든 예시

순서가 바뀌어도 위치를 따라가기 · FLIP

First·Last·Invert·Play. 레이아웃 변경 전후 위치를 측정해 이동을 이어주는 기법

A / 우선순위 1자료 수집

B / 우선순위 2초안 작성

C / 우선순위 3결과 검토

이렇게 말해보세요

[정렬 가능한 카드 목록]에 FLIP 레이아웃 애니메이션을 적용해줘. 정렬 전후 위치를 측정해 카드가 새 자리로 450ms 동안 이동하게 해줘. DOM 순서도 실제로 바꾸고 모션 감소를 지원해줘.

정렬 결과가 순간적으로 바뀌면 무엇이 어디로 갔는지 놓치기 쉽습니다. 이동 경로를 보여줘 같은 항목을 눈으로 추적할 수 있습니다.

데모는 위치 측정과 Web Animations API로 직접 구현했습니다. Motion 라이브러리를 실행한 결과는 아닙니다.