목록 추가 및 삭제 애니메이션(HTML)
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
목록 애니메이션은 비슷한 항목의 컬렉션에서 변경 내용을 표시하는 데 사용합니다. 여기에는 애니메이션 추가와 삭제가 포함됩니다. 여기서 "목록"이란 용어는 표준 식료품 목록 양식(예: 그리드) 이상의 의미를 포함합니다. 이러한 애니메이션은 항목이 들어오거나 나갈 때 매끄러운 시각적 전환을 제공하여 명확하게 이해할 수 있도록 합니다. 추가 애니메이션에서는 기존의 항목이 미끄러지듯 나가면서 새 항목을 위한 공간을 확보합니다. 그런 다음 새 항목이 그 공간에 페이드 인하고 확장됩니다. 삭제 애니메이션은 그 반대입니다.
이 애니메이션 집합은 다음 API로 구성됩니다.
- createAddToListAnimation
- createDeleteFromListAnimation
- createAddToSearchListAnimation
- createDeleteFromSearchListAnimation
목록에서 추가/삭제 애니메이션
목록 애니메이션은 비슷한 항목의 컬렉션에서 항목을 삭제하거나 삽입하는 것을 표시하는 데 사용합니다. 이러한 애니메이션은 사용자가 검색어를 입력할 때 검색 결과를 필터링하는 검색 목록에서 추가/삭제 애니메이션과 다르며, 검색 애니메이션이 약간 더 빠릅니다.
다음 동영상은 목록에 항목을 추가하거나 목록에서 항목을 제거하는 애니메이션을 보여 줍니다.
검색 목록에서 추가/삭제 애니메이션
검색 목록 애니메이션은 검색 시나리오의 일부로 목록의 항목이 빠르게 변경되는 상황일 때 사용합니다. 이 애니메이션 집합은 목록에서 추가하고 삭제하는 애니메이션과 타이밍이 다릅니다. 검색 목록 애니메이션은 연속 필터링과 같은 시나리오에 보다 신속하게 응답합니다. 예를 들어 목록의 항목을 검색하기 위해 검색어를 입력하고 목록이 실시간으로 결과를 필터링할 때 필터링에서 제외되는 항목은 검색 목록에서 삭제 애니메이션을 사용해야 합니다. 반대로 문자열을 검색한 다음 백스페이스 키를 눌러 검색 용어에서 문자를 제거한 경우 검색 결과 목록에 다시 추가한 항목은 검색 목록에 추가 애니메이션을 사용해야 합니다.
다음 동영상은 검색 목록에 항목을 추가하거나 목록에서 항목을 제거하는 애니메이션을 보여 줍니다.
다른 리소스
페이드 애니메이션 API 사용을 보여 주는 코드 예제는 HTML 애니메이션 라이브러리 샘플을 참조하세요.
이러한 애니메이션 사용의 디자인 모범 사례는 추가 및 삭제 애니메이션에 대한 지침 및 검사 목록을 참조하세요.