애니메이션

뷰 사이의 전환에 애니메이션을 적용할 수 있습니다. 화살표 탐색과 스와이프는 가로로 슬라이드되고, 월·연도 선택 화면은 크로스페이드되며, 접기는 월과 주 사이에서 캘린더 높이를 애니메이션합니다.

모든 전환에 하나의 타이밍

true 대신 객체를 전달하면 타이밍을 덮어씁니다. 최상위 값은 모든 전환에 적용됩니다.

전환별 타이밍

세 전환 그룹은 서로 독립적으로 조정할 수 있습니다. 화살표와 스와이프에는 slide, 선택 화면에는 fade, 월과 주 사이의 접기에는 collapse 아래에 값을 중첩하세요. 중첩된 값이 최상위 값보다 우선합니다.

아래 예시에서 슬라이드는 목표 지점을 넘겼다가 돌아오는 곡선을 사용하고, 선택 화면과 접기 컨트롤은 각각 더 차분한 타이밍을 사용합니다.

애니메이션 중 캘린더 조회하기

슬라이드와 크로스페이드가 진행되는 동안 사라지는 내용은 inert가 지정된 [data-vc-ghost] 레이어 안에 남아 있으므로, 그 시간에는 날짜 요소가 두 번 존재할 수 있습니다. onClickArrow나 onClickDate 같은 콜백은 이 구간 안에서 호출되므로, 콜백에서 캘린더를 조회한다면 이 레이어를 제외하세요. 접기는 고스트 레이어를 만들지 않습니다.

const dates = calendar.context.mainElement.querySelectorAll('[data-vc-date]');
const visible = [...dates].filter((date) => !date.closest('[data-vc-ghost]'));