最近用angular4寫項目需要為每次路由跳轉增加動畫，看了一下官方文檔，雖然可以實現，但是要每個組件都引入一次animations，比較麻煩，找網上也查閱了很多資料，但是都沒找到適用的方法，最后自己寫了一種方法如下：
首先在app.module中導入BrowserAnimationsModule
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [
BrowserAnimationsModule
在根目錄src/app/下創建一個animations.ts。內容如下，這里我用到query和group是想兩個頁面來回切換有過度痕跡
import { AnimationEntryMetadata, state } from '@angular/core';
import { trigger, transition, animate, style, query, group } from '\@angular/animations';
export const routeAnimation: AnimationEntryMetadata =
trigger('routeAnimation', [
transition(':enter', [
style({
position: 'absolute'
}),
animate('0.5s ease-in-out')
]),
transition('* => *', [
query(':leave', style({ transform: 'translateX(0)', position: 'absolute'}), { optional: true }),
query(':enter', style({ transform: 'translateX(100%)', position: 'absolute'}), { optional: true }),
group([
query(':leave', animate('.5s ease-in-out', style({transform: 'translateX(-100%)'})), { optional: true }),
query(':enter', animate('.5s ease-in-out', style({transform: 'translateX(0)'})), { optional: true })
])
])
]);
接著在app.component中使用 NavigationEnd 設置每次路由跳轉監聽的參數變化并且引入animations模塊
import { Router, NavigationEnd } from '@angular/router';
import { routeAnimation } from './animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less'],
animations: [routeAnimation]
})
// router跳轉動畫所需參數
routerState: boolean = true;
routerStateCode: string = 'active';
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
// 每次路由跳轉改變狀態
this.routerState = !this.routerState;
this.routerStateCode = this.routerState ? 'active' : 'inactive';
}
});
最后在app.component.html中聲明路由動畫就可以了
<div id="app" [@routeAnimation]="routerStateCode"> <router-outlet></router-outlet> </div>
現在全局路由跳轉都有動畫了，不用一個一個組件導入animations。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
