작업 방식
transitions-dev는 네임스페이스가 있는 선택자와 의미 기반 모션 변수를 사용하는 이식 가능한 CSS 전환 레시피를 제공합니다. 트리거에 붙은 드롭다운, 모달, 바뀌는 텍스트, 슬라이딩 탭 표시기 등 눈에 보이는 컴포넌트에 맞는 레시피를 선택합니다. 구현 시 문서의 상태 훅을 앱의 실제 동작에 연결합니다.
검토와 개선 경로도 제공합니다. 검토는 편집 없이 적용 가능 지점을 찾고, 개선은 임의의 값을 의미에 맞는 토큰으로 매핑합니다. 닫기 애니메이션은 기존 숫자가 가깝기 때문이 아니라 목적이 닫기이므로 닫기 시간 토큰에 연결합니다.
예상 산출물
- 필요한 CSS 변수와 함께 선택한 전환 레시피.
- 컴포넌트에 연결된 문서상 클래스 또는 속성 훅.
- 파일 단위 검토 또는 시맨틱 토큰 개선 제안.
브리프에서 검토까지
- 01컴포넌트를 구분하세요
요소와 상태 변화를 검사하세요. 기준점에 붙은 메뉴와 중앙 모달, 텍스트 교체와 페이지 이동을 구별하세요.
- 02토큰과 상태 훅을 추가하세요
공유 변수 블록을 한 번 사용하거나 선택한 레시피의 변수를 사용하세요. 닫기 정리, 재실행 처리, 필요한 JavaScript 조정을 유지하세요.
- 03반복 동작을 시험하세요
컴포넌트를 열고 닫고 다시 여세요. 모션 감소 분기를 확인하고 변수 기반 타이밍이 정리 로직과 동기화되는지 검증하세요.