3. 開(kāi)啟 Angular animations 之旅
3.1 Angular animations 小試牛刀
- 查看
package.json愧怜，看文件中是否含有@angular/animations， 如果沒(méi)有拥坛，則先進(jìn)行安裝cnpm i @angular/animations -S - 安裝完成之后蓬蝶，在
App.module.ts中引入import { BrowserAnimationsModule } from '@angular/platform-browser/animations';并聲明
// App.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { MatSidenavModule } from '@angular/material';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MatSidenavModule,
CoreModule,
BrowserAnimationsModule
],
providers: [ {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: false }} ],
bootstrap: [AppComponent]
})
export class AppModule { }
Ok猜惋， 主要配置就緒，進(jìn)行下一步著摔，來(lái)一個(gè)簡(jiǎn)單的小demo缓窜，淡入淡出動(dòng)畫(huà)效果谍咆， 最簡(jiǎn)單的動(dòng)畫(huà)就做好了
<!-- App.component.html -->
<div class="square" [@square] = "squareState"></div>
<button (click)="toggle()">toggle</button>
/* App.component.css */
.square {
width: 200px;
height: 200px;
background: #000;
}
// App.component.ts
import { Component } from '@angular/core';
// 引入 animations 相關(guān)方法
import {trigger, style, state, transition, animate, keyframes} from '@angular/animations';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
// Animations
animations: [
trigger('square', [
state('red', style({'background': 'red'})),
state('green', style({'background': 'green'})),
transition('red => green', animate(1000)),
transition('green => red', animate(2000))
])
]
})
export class AppComponent {
name = 'Angular';
squareState: string;
toggle() {
this.squareState = this.squareState === 'red' ? 'green' : 'red';
}
}
3.2 Angular animations 進(jìn)階
- Group 用于同時(shí)進(jìn)行一組的動(dòng)畫(huà)變換：
group([animate(...), animate(...) ...])- Query & Stagger Query 用于父節(jié)點(diǎn)尋找子節(jié)點(diǎn)，很強(qiáng)大摹察；Stagger 指定有多個(gè)滿(mǎn)足Query的元素
3.2.1 Angular 路由動(dòng)畫(huà)
1.下面來(lái)整一個(gè)路由動(dòng)畫(huà)恩掷， 新建路由動(dòng)畫(huà)供嚎， 新建文件夾 animations 用于統(tǒng)一管理動(dòng)畫(huà)峭状，在該文件夾下新建路由動(dòng)畫(huà)文件 router.anim.ts
// animations > router.anim.ts
import { trigger, style, state, transition, animate, group } from '@angular/animations';
export const slideToRight = trigger('routeAnim', [
state('void', style({ 'position': 'fixed', 'width': '100%', 'height': '100%' })),
state('*', style({ 'position': 'fixed', 'width': '100%', 'height': '80%' })),
transition(':enter', [
style({ 'transform': 'translateX(-100%)', 'opacity': '0' }),
group([
animate('.5s ease-in-out', style({ 'transform': 'translateX(0)' })),
animate('.3s ease-in', style({ 'opacity': '1' }))
])
]),
transition(':leave', [
style({ 'transform': 'translateX(0)', 'opacity': '1' }),
group([
animate('.5s ease-in-out', style({ 'transform': 'translateX(100%)' })),
animate('.3s ease-in', style({ 'opacity': '0' }))
])
]),
]);
- 路由動(dòng)畫(huà)中必須使用
HostBinding模式，不能直接在element上綁定
// Project.compontnt.ts
import { Component, OnInit, HostBinding } from '@angular/core';
import {slideToRight} from '../animations/router.anim';
@Component({
selector: 'app-project',
templateUrl: './project.component.html',
styleUrls: ['./project.component.css'],
animations: [
slideToRight
]
})
export class ProjectComponent implements OnInit {
@HostBinding('@routeAnim') state;
constructor() { }
ngOnInit() {
}
}
