진입 및 이탈 애니메이션
요소가 들어오고 나갈 때 애니메이션을 적용합니다.
진입 및 이탈 애니메이션은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
요소 표시 애니메이션
항목이 목록에 추가되거나 목록에서 제거될 때처럼 요소가 나타나거나 사라질 때 애니메이션을 적용하고 싶은 경우가 많습니다. 앵귤러는 이를 위해 :enter와 :leave 별칭을 제공합니다.
무효 상태와 표시 상태
DOM에 없는 요소는 void 상태입니다. 진입은 void => *이고, 이탈은 * => void입니다.
진입 별칭
:enter는 void => *의 줄임말입니다. 요소가 추가될 때 애니메이션을 적용하는 데 사용하십시오.
transition(':enter', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])이탈 별칭
:leave는 * => void의 줄임말입니다. 앵귤러는 이탈 애니메이션이 끝날 때까지 요소를 DOM에 유지합니다.
transition(':leave', [
animate('300ms', style({ opacity: 0 }))
])제어 흐름으로 트리거하기
@if 또는 @for로 관리되는 요소에 trigger를 적용합니다. 요소를 추가하거나 제거하면 진입 또는 이탈 애니메이션이 실행됩니다.
@if (visible()) {
<div [@fade]>Hello</div>
}페이드 trigger
재사용 가능한 페이드 인/아웃 trigger의 예입니다.
trigger('fade', [
transition(':enter', [
style({ opacity: 0 }),
animate('200ms', style({ opacity: 1 }))
]),
transition(':leave', [
animate('200ms', style({ opacity: 0 }))
])
])슬라이드 인 예제
진입할 때 슬라이드 인 효과를 만들려면 변형과 불투명도를 결합하십시오.
transition(':enter', [
style({ transform: 'translateY(-10px)', opacity: 0 }),
animate('250ms ease-out',
style({ transform: 'translateY(0)', opacity: 1 }))
])목록 항목 애니메이션
@for 내부의 각 항목에 trigger를 배치하면 항목을 추가하거나 제거할 때 각 항목에 개별적으로 애니메이션이 적용됩니다.
@for (item of items(); track item.id) {
<li [@fade]>{{ item.name }}</li>
}이탈에 엔진이 필요한 이유
일반적으로 제거된 요소는 즉시 사라집니다. 애니메이션 엔진은 제거를 가로채 노드를 유지하고 :leave 애니메이션을 실행한 다음 자동으로 제거합니다.
애니메이션 비활성화
조건에 따라 애니메이션을 건너뛰려면 @.disabled를 바인딩하십시오. 동작 줄이기 설정이나 초기 렌더링에 유용합니다.
<div [@.disabled]="prefersReducedMotion">...</div>모범 사례
진입 및 이탈 애니메이션은 짧고 자연스럽게 유지하십시오. prefers-reduced-motion을 존중하십시오. 부드러운 동작을 위해 레이아웃 속성 대신 변형과 불투명도(GPU 친화적)를 애니메이션에 사용하십시오.
빠른 확인
enter/leave 애니메이션에 대한 이해도를 확인해 보세요.
복습
:enter(void => *)와 :leave(* => void)가 요소가 추가되거나 제거될 때 요소를 애니메이션한다는 것을 배웠습니다. 또한 @if/@for와 함께 작동하며, 애니메이션이 완료될 때까지 제거 중인 노드를 엔진이 유지합니다.
자주 묻는 질문
“진입 및 이탈 애니메이션” 강의는 무료인가요?
네 — “진입 및 이탈 애니메이션” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“진입 및 이탈 애니메이션”에서 뭘 배우나요?
요소가 들어오고 나갈 때 애니메이션을 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“진입 및 이탈 애니메이션” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 애니메이션 기초: 트리거와 상태
- 전환과 타이밍
- 진입 및 이탈 애니메이션
- 키프레임과 순차 지연