전환과 타이밍
전환을 사용해 상태 사이를 애니메이션으로 연결합니다.
전환과 타이밍은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
상태 사이에 애니메이션 적용하기
상태는 요소가 어디에 머무는지를 설명하고, 전환은 요소가 상태 사이에서 어떻게 이동하는지를 설명합니다. transition 함수는 상태 변경과 애니메이션을 연결합니다.
transition 함수
transition은 상태 변경 표현식과 하나 이상의 애니메이션 단계를 받습니다.
transition('closed => open', animate('300ms'))방향 연산자
한 방향에는 =>를 사용하고, 양방향에는 <=>를 사용합니다.
transition('open <=> closed', animate('250ms ease-in-out'))animate 함수
animate는 지속 시간, 선택적 지연 시간, 이징을 정의합니다. 문자열 형식은 "duration delay easing"입니다.
animate('500ms 100ms ease-out')지속 시간 단위
지속 시간에는 ms 또는 s를 사용할 수 있습니다. 단위가 없는 숫자는 밀리초로 처리됩니다.
animate('0.4s')
animate('400ms')
animate(400)이징 함수
이징은 가속 방식을 제어합니다. linear, ease, ease-in, ease-out, ease-in-out 또는 cubic-bezier()를 사용할 수 있습니다.
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')인라인 대상 스타일
animate는 두 번째 style 인수를 받아 이름이 지정된 상태에 연결되지 않은 스타일을 향해 애니메이션을 적용할 수 있습니다.
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])여러 단계
단계 배열을 전달하면 하나의 전환 안에서 순서대로 실행할 수 있습니다.
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])와일드카드 전환
*를 사용하면 모든 상태에서 시작하거나 모든 상태로 전환되는 전환과 일치시킬 수 있어 일반적인 진입 효과에 유용합니다.
transition('* => open', animate('200ms'))시작 스타일
animate() 앞에 인수 없는 style()을 배치하면 시작점을 설정하고, 앵귤러가 목적지 상태의 스타일로 애니메이션을 적용합니다.
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])타이밍 모범 사례
UI 전환은 반응성을 위해 짧게(150~300ms) 유지하십시오. 더 긴 지속 시간은 크고 의도적인 움직임에 사용하십시오. 원하는 느낌에 맞춰 이징을 선택하십시오.
빠른 확인
전환과 타이밍에 대한 이해도를 확인합니다.
복습
transition은 상태 변경(=> 또는 <=>)을 animate 단계에 연결한다는 것을 배웠습니다. 타이밍 문자열은 지속 시간 지연 시간 이징 형식이며, style과 animate 단계를 연결하여 순차 애니메이션을 만들 수 있습니다.
자주 묻는 질문
“전환과 타이밍” 강의는 무료인가요?
네 — “전환과 타이밍” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“전환과 타이밍”에서 뭘 배우나요?
전환을 사용해 상태 사이를 애니메이션으로 연결합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“전환과 타이밍” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.