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

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

조회 0추천 0

직접 만든 예시

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

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

빈칸을 내 상황에 맞게 채워 사용하세요.

입력과 결과 비교

설명용 예시

입력 정렬할 때 카드가 부드럽게 움직이게 해줘.

A·B·C 목록을 뒤집으면 같은 카드가 새 위치로 이동

활용 방식을 보여주는 예시이며, 직접 실행한 결과가 아닙니다.

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

전문 용어를 활용해 mouseco가 작성한 문구입니다. 출처는 용어와 기법의 참고 문서입니다. 원출처 ↗

기존 가이드와 자세한 사용법 읽기

안녕하세요 mouseco 입니다. :)

FLIP · Layout animation은 First·Last·Invert·Play. 레이아웃 변경 전후 위치를 측정해 이동을 이어주는 기법입니다.

막연한 요청을 구체적인 문구로

기존 요청: 정렬할 때 카드가 부드럽게 움직이게 해줘.

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

A·B·C 목록을 뒤집으면 같은 카드가 새 위치로 이동

예시는 위 기법을 보여주기 위해 직접 제작했습니다. 수치와 업무 상황은 가상이며 특정 모델의 성능 비교 결과가 아닙니다.

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

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