애니메이션 기초: 트리거와 상태
애니메이션 상태와 트리거를 정의합니다.
애니메이션 기초: 트리거와 상태은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
앵귤러 애니메이션
앵귤러의 애니메이션 시스템은 웹 애니메이션 API를 기반으로 하는 선언형 DSL입니다. 상태와 전환을 설명하면 앵귤러가 타이밍과 DOM 업데이트를 처리합니다.
설정
애니메이션 엔진을 활성화하려면 부트스트랩 구성에서 애니메이션을 제공합니다.
bootstrapApplication(AppComponent, {
providers: [provideAnimationsAsync()]
});trigger
trigger는 애니메이션의 이름을 지정하고 상태와 전환을 그룹화합니다. 바인딩을 통해 요소에 연결합니다.
animations: [
trigger('openClose', [
// states and transitions
])
]상태 정의
state는 이름이 지정된 상태를 해당 상태에 있는 동안 요소가 가져야 할 CSS 스타일 집합에 연결합니다.
state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))스타일 함수
style은 CSS 속성 객체를 받습니다. 키에는 camelCase를 사용하거나 따옴표로 묶은 CSS 이름을 사용하십시오.
style({ backgroundColor: '#1976d2', transform: 'scale(1)' })trigger 바인딩
템플릿에서 @triggerName을 현재 상태를 반환하는 표현식에 바인딩합니다.
<div [@openClose]="isOpen ? 'open' : 'closed'">
Content
</div>완전한 trigger
두 상태와 그 사이의 전환을 포함하는 trigger의 예입니다.
trigger('openClose', [
state('open', style({ height: '200px' })),
state('closed', style({ height: '0px' })),
transition('open <=> closed', animate('300ms ease'))
])컴포넌트에서 상태 구동하기
컴포넌트는 부울 값이나 문자열만 전환하고, 앵귤러가 일치하는 상태 스타일 사이를 보간합니다.
isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }와일드카드 상태
와일드카드 *는 모든 상태와 일치하며, 나중에 다룰 기본값 및 진입/이탈 애니메이션에 유용합니다.
state('*', style({ opacity: 1 }))무효 상태
특수한 void 상태는 DOM에 없는 요소를 나타내며, 진입 및 이탈 애니메이션의 기반이 됩니다.
선언형 애니메이션을 사용하는 이유
선언형 애니메이션을 사용하면 타이밍 로직을 컴포넌트 외부에 둘 수 있고, 앵귤러의 수명 주기와 통합되며, 요소가 DOM에서 사라질 때 자동으로 정리됩니다.
빠른 확인
애니메이션 기초에 대한 이해도를 확인합니다.
복습
앵귤러 애니메이션은 state 정의를 포함하는 trigger를 사용하며, 각 정의는 이름을 style에 연결하고 템플릿에서 [@trigger]를 통해 바인딩한다는 것을 배웠습니다. void와 * 상태는 요소가 없는 경우와 모든 상태를 다룹니다.
자주 묻는 질문
“애니메이션 기초: 트리거와 상태” 강의는 무료인가요?
네 — “애니메이션 기초: 트리거와 상태” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“애니메이션 기초: 트리거와 상태”에서 뭘 배우나요?
애니메이션 상태와 트리거를 정의합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“애니메이션 기초: 트리거와 상태” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 애니메이션 기초: 트리거와 상태
- 전환과 타이밍
- 진입 및 이탈 애니메이션
- 키프레임과 순차 지연