1. 상태란 무엇입니까
? 상태는 이동의 여러 단계에서 이동되는 요소의 스타일을 나타냅니다. [관련 추천 튜토리얼: "Angular 튜토리얼"]
2. 상태 유형
Angular에는 void , * , custom 세 가지 유형의 상태가 있습니다. 
void : 요소가 메모리에 생성되었지만 아직 DOM에 추가되지 않았거나 요소가 DOM에서 제거된 경우 이 상태가 발생합니다.
* : 요소가 DOM 트리에 삽입된 후의 상태이거나 이미 DOM에 있는 요소입니다. 기본 상태 사용자 정의라고도 하는 DOM 트리 상태
custom 사용자 정의 상태, 요소는 기본적으로 페이지에 있으며 패널 접기 및 확장과 같이 한 상태에서 다른 상태로 이동합니다.
3. 입장 애니메이션
이란 요소가 생성된 후 애니메이션 형태로 사용자 앞에 나타나는 것을 의미하며, 별칭은 void => * :enter 같습니다.
종료 애니메이션은 요소가 삭제되기 전에 수행되는 작별 애니메이션을 의미하며 종료 애니메이션의 상태는 * => void 이며 별칭은 :leave
1. 애니메이션 기능을 사용하기 전에 BrowserAnimationsModule 이라는 애니메이션 모듈을 소개해야 합니다.
"@angular/platform-browser/animations"에서 가져오기 { BrowserAnimationsModule }
@NgModule({
가져오기: [BrowserAnimationsModule],
})
내보내기 클래스 AppModule {} 2. 기본 코드 분석, 할 일 삭제 작업 및 추가 작업
<!-- index.html 파일에 bootstrap.min.css 소개 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<div class="container">
<h2>할일</h2>
<div 클래스="양식-그룹">
<input (keyup.enter)="addItem(input)" #input type="text" class="form-control" placeholder="할 일 추가" />
</div>
<ul class="목록-그룹">
<li (click)="removeItem(i)" *ngFor="할 일 항목 허용; let i = index" class="list-group-item">
{{ 항목 }}
</li>
</ul>
</div> "@angular/core"에서 { 구성요소 } 가져오기
@요소({
선택기: "app-root",
templateUrl: "./app.comComponent.html",
스타일: []
})
내보내기 클래스 AppComponent {
// 할 일 목록 todos: string[] = ["Angular 배우기", "RxJS 배우기", "NgRx 배우기"]
// 할 일 추가
addItem(입력: HTMLInputElement) {
this.todos.push(입력.값)
입력.값 = ""
}
// 할 일 삭제
RemoveItem(색인: 번호) {
this.todos.splice(색인, 1)
}
} 3. 애니메이션 생성
트리거 메소드는 애니메이션 이름을 지정하는 데 사용되며,
전환 메소드는 애니메이션의 모션 상태, 종료 애니메이션 또는 진입 애니메이션 또는 사용자 정의 상태를 지정하는 데 사용됩니다. 생기.
스타일 메소드는 다양한 상태의 요소에 해당하는 스타일을 설정하는 데 사용됩니다.
animate 메소드는 애니메이션 모션 시간, 지연된 이벤트 및 모션 형태와 같은 모션 매개변수를 설정하는 데 사용됩니다
.
애니메이션: [
//애니메이션 생성, 애니메이션 이름은 슬라이드
Trigger("슬라이드", [
//입장 애니메이션을 지정합니다. 참고: 문자열 양쪽에 공백이 있을 수 없으며 화살표 양쪽에 공백이 있을 수도 있고 없을 수도 있습니다. // void => *는 다음과 같이 바꿀 수 있습니다.
Transition("void => *", [
// 스타일에 들어가기 전에 요소의 스타일을 지정합니다({ opacity: 0, 변환: "translateY(40px)" }),
//장면 진입 후 요소의 스타일 및 모션 매개변수 지정 animate(250, style({ opacity: 1, 변환: "translateY(0)" }))
]),
//종료 애니메이션 지정// * => void는 다음으로 대체될 수 있습니다:leave
Transition("* => 무효", [
//요소가 나타난 후 요소의 스타일 및 모션 매개변수를 지정합니다. animate(600, style({ opacity: 0, 변환: "translateX(100%)" }))
])
])
]
}) 참고: 입구 애니메이션에서 요소의 기본 상태를 지정할 필요가 없습니다. Angular는 기본 상태
트리거("slide", [
전환(":입력", [
style({ 불투명도: 0, 변환: "translateY(40px)" }),
애니메이션(250)
]),
전환(":나가기", [
animate(600, style({ 불투명도: 0, 변환: "translateX(100%)" }))
])
]) 참고: 애니메이션의 모션 매개변수를 설정하려면 animate 메소드의 매개변수 중 하나를 문자열 형식으로 변경해야 합니다.
// 총 애니메이션 실행 시간 지연 시간(선택 사항) 모션 형식(선택 사항)
animate("600ms 1seasing-out", style({ opacity: 0, 변환: "translateX(100%)" })) 키프레임 애니메이션은 keyframes 메소드를 사용하여 정의됩니다.
전환(":나가기", [
생기 있게 하다(
600,
키프레임([
스타일({ 오프셋: 0.3, 변환: "translateX(-80px)" }),
style({ 오프셋: 1, 변환: "translateX(100%)" })
])
)
]) Angular는 애니메이션이 시작될 때와 애니메이션이 완료된 후에 각각 애니메이션과 관련된 두 가지 콜백 함수를 제공합니다.
<li @slide (@slide.start)="start($event)" (@slide.done)="done($event)"></li>
"@angular/animations"에서 { AnimationEvent } 가져오기
시작(이벤트: AnimationEvent) {
console.log(이벤트)
}
done(이벤트: AnimationEvent) {
console.log(이벤트)
} 1. 여러 구성 요소 호출을 용이하게 하기 위해 애니메이션 정의를 별도의 파일에 배치합니다.
"@angular/animations"에서 { 애니메이션, 키프레임, 스타일, 전환, 트리거 } 가져오기
const 슬라이드 내보내기 = Trigger("슬라이드", [
전환(":입력", [
style({ 불투명도: 0, 변환: "translateY(40px)" }),
애니메이션(250)
]),
전환(":나가기", [
생기 있게 하다(
600,
키프레임([
스타일({ 오프셋: 0.3, 변환: "translateX(-80px)" }),
style({ 오프셋: 1, 변환: "translateX(100%)" })
])
)
])
]) "./animations"에서 { 슬라이드 } 가져오기
@요소({
애니메이션: [슬라이드]
}) 2. 여러 애니메이션 호출을 용이하게 하기 위해 특정 애니메이션 정의를 추출합니다.
"@angular/animations"에서 {animate, animation, keyframe, style, Transition, Trigger, useAnimation}을 가져옵니다.
내보내기 const SlideInUp = 애니메이션([
style({ 불투명도: 0, 변환: "translateY(40px)" }),
애니메이션(250)
])
내보내기 const SlideOutLeft = 애니메이션([
생기 있게 하다(
600,
키프레임([
스타일({ 오프셋: 0.3, 변환: "translateX(-80px)" }),
style({ 오프셋: 1, 변환: "translateX(100%)" })
])
)
])
const 슬라이드 내보내기 = Trigger("슬라이드", [
전환(":enter", useAnimation(slideInUp)),
전환(":leave", useAnimation(slideOutLeft))
]) 3. 애니메이션 호출 시 총 모션 시간, 지연 시간, 모션 형태를 전송합니다.export
const SlideInUp = animation(
[
style({ 불투명도: 0, 변환: "translateY(40px)" }),
animate("{{ 기간 }} {{ 지연 }} {{ 완화 }}")
],
{
매개변수: {
지속 시간: "400ms",
지연: "0초",
easing: "ease-out"
}
}
) 애니메이션을 수행하기 위한 Transition(":enter", useAnimation(slideInUp, {params: {delay: "1s"}})) Angular는 요소를 찾고 해당 요소에 대한 애니메이션을 생성하는 query 방법을 제공합니다.
"./animations"에서 { 슬라이드 } 가져오기
애니메이션: [
슬라이드,
Trigger("todoAnimations", [
전환(":입력", [
query("h2", [
style({ 변환: "translateY(-30px)" }),
애니메이션(300)
]),
// 하위 애니메이션을 쿼리하여 실행 query("@slide", animateChild())
])
])
] <div class="container" @todoAnimations>
<h2>할 일</h2>
<ul class="목록-그룹">
<리
@슬라이드
(클릭)="항목 제거(i)"
*ngFor="할 일 항목을 지정합니다. i = 색인을 지정합니다."
클래스="목록-그룹-항목"
>
{{ 항목 }}
</li>
</ul>
</div> 기본적으로 상위 애니메이션과 하위 애니메이션이 순서대로 실행됩니다. group 메소드를 사용하여 병렬로 만들 수 있습니다
.
전환(":입력", [
그룹([
query("h2", [
style({ 변환: "translateY(-30px)" }),
애니메이션(300)
]),
쿼리("@slide", animateChild())
])
])
]) Angular는 여러 요소가 동시에 동일한 애니메이션을 실행할 때 각 요소의 애니메이션 실행을 차례로 지연시키는 Stagger 방식을 제공합니다.
전환(":입력", [
그룹([
query("h2", [
style({ 변환: "translateY(-30px)" }),
애니메이션(300)
]),
query("@slide", stagger(200, animateChild()))
])
]) 참고: 스태거 방법은 쿼리 방법 내에서
Angular는 상태를 정의하기 위한 state 메서드를 제공합니다.
1. 기본 코드 분석
<div class="container">
<div class="패널 패널-기본값">
<div class="panel-heading" (클릭)="toggle()">
하나의 프레임워크, 다양한 플랫폼, 모바일 및 데스크탑</div>
<div 클래스="패널-본체">
<p>
간단한 선언적 템플릿을 사용하여 다양한 기능을 빠르게 구현하세요. 사용자 정의 구성 요소와 다양한 기존 구성 요소를 사용하여 템플릿 언어를 확장합니다. 거의 모든 IDE에서 Angular 지원 받기
즉각적인 도움과 피드백을 원하시면 이 모든 것은 코드를 "작동"시키기 위해 머리를 쥐어짜기보다는 아름다운 애플리케이션을 작성하는 데 도움을 주기 위한 것입니다.
</p>
<p>
프로토타입부터 글로벌 배포까지 Angular는 Google에 대한 지원을 제공합니다.
대규모 애플리케이션을 위한 확장성이 뛰어난 인프라 및 기술입니다.
</p>
<p>
Web Workers 및 서버 측 렌더링을 통해 오늘(그리고 내일) 웹에 접속하세요.
플랫폼에서 달성 가능한 최고 속도. Angular를 사용하면 확장성을 효과적으로 제어할 수 있습니다. RxJS, Immutable.js 및 기타 푸시 모델을 기반으로 대규모 데이터 요구 사항에 적응할 수 있습니다.
</p>
<p>
Angular 사용법 배우기
애플리케이션을 구축한 후 다양한 플랫폼의 애플리케이션에서 이러한 코드와 기능을 재사용합니다.
웹, 모바일 웹, 모바일 앱, 기본 앱 및 데스크톱 기본 앱.
</p>
</div>
</div>
</div>
<스타일>
.컨테이너 {
여백 상단: 100px;
}
.패널 제목 {
커서: 포인터;
}
</style> "@angular/core"에서 { 구성요소 } 가져오기
@요소({
선택기: "app-root",
templateUrl: "./app.comComponent.html",
스타일: []
})
내보내기 클래스 AppComponent {
isExpended: 부울 = false
토글() {
this.isExpended = !this.isExpended
}
} 2. 애니메이션
트리거("expandCollapse", [
// 접힌 상태 요소에 해당하는 스타일을 정의하기 위해 state 메소드를 사용합니다.
"무너졌다",
스타일({
높이: 0,
오버플로: "숨겨짐",
패딩상단: 0,
패딩하단: 0
})
),
// 확장된 상태 요소에 해당하는 스타일을 정의하기 위해 state 메소드를 사용합니다. state("expanded", style({ height: "*", Overflow: "auto" })),
// 확장 애니메이션을 정의합니다.
// 접기 애니메이션 전환 정의("expanded =>collapsed", animate("400mseasing-in"))
]) <div class="panel-body" [@expandCollapse]="isExpended ? 'expanded' : 'collapsed'"></div>
1. 경로에 상태 식별자를 추가합니다. 이 식별자는 경로가 애니메이션
const 경로를 수행할 때의 사용자 지정 상태입니다. Routes = [
{
길: "",
구성요소: 홈구성요소,
pathMatch: "전체",
데이터: {
애니메이션: "하나"
}
},
{
경로: "정보",
구성요소: AboutComponent,
데이터: {
애니메이션: "둘"
}
},
{
경로: "뉴스",
구성요소: 뉴스구성요소,
데이터: {
애니메이션: "3"
}
}
] 2. 라우팅 소켓 객체를 통해 라우팅 상태 식별자를 얻고 애니메이션 호출자에게 식별자를 전달하여 애니메이션이 실행될 현재 상태가 무엇인지 실행하도록 합니다.
<div class="routerContainer" [@routerAnimations]=" prepareRoute(출구)" > <router-outlet #outlet="outlet"></router-outlet> </div>
"@angular/router"에서 { RouterOutlet } 가져오기
내보내기 클래스 AppComponent {
prepareRoute(출구: RouterOutlet) {
반품 (
콘센트 &&
콘센트.활성화RouteData &&
콘센트.활성화된RouteData.animation
)
}
} 3. routerContainer를 상대 위치로 설정하고 직접적인 첫 번째 수준 하위 요소를 절대 위치로 설정합니다.
/* styles.css */
.routerContainer {
위치: 상대;
}
.routerContainer > * {
위치: 절대;
왼쪽: 0;
상단: 0;
너비: 100%;
} 4. 애니메이션
트리거("routerAnimations", [
Transition("하나 => 둘, 하나 => 셋, 둘 => 셋", [
query(":enter", style({ 변환: "translateX(100%)", 불투명도: 0 })),
그룹([
질문(
":입력하다",
생기 있게 하다(
"0.4초 이즈인",
style({ 변환: "translateX(0)", 불투명도: 1 })
)
),
질문(
":떠나다",
생기 있게 하다(
"0.4초 완화",
스타일({
변환: "translateX(-100%)",
불투명도: 0
})
)
)
])
]),
Transition("셋 => 둘, 셋 => 하나, 둘 => 하나", [
질문(
":입력하다",
style({ 변환: "translateX(-100%)", 불투명도: 0 })
),
그룹([
질문(
":입력하다",
생기 있게 하다(
"0.4초 이즈인",
style({ 변환: "translateX(0)", 불투명도: 1 })
)
),
질문(
":떠나다",
생기 있게 하다(
"0.4초 완화",
스타일({
변환: "translateX(100%)",
불투명도: 0
})
)
)
])
])
]) 더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위의 상태는 무엇입니까? Angular의 애니메이션에 대해 자세히 알아보세요. 자세한 내용은 PHP 중국어 웹사이트의 다른 관련 기사를 참고하세요!