一、routerTransition的指令字面意思是路由過分,經過查詢資料routerTransition是路由切換過程當中所要顯示的動畫效果。 二、angular4把動畫效果的包分離成單獨的包 @angular/animations,若是要使用動畫須要安裝@angular/animationsnpm
npm install --save @angular/animations // 根model須要導入BrowserAnimationsModule import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ... imports: [BrowserAnimationsModule], ... }) export class PizzaPartyAppModule { }
三、編寫動畫效果angular4
import {animate, state, style, transition, trigger} from '@angular/animations'; export function routerTransition() { return slideToTop(); } export function slideToRight() { return trigger('routerTransition', [ state('void', style({})), state('*', style({})), transition(':enter', [ style({transform: 'translateX(-100%)'}), animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})) ]), transition(':leave', [ style({transform: 'translateX(0%)'}), animate('0.5s ease-in-out', style({transform: 'translateX(100%)'})) ]) ]); } export function slideToLeft() { return trigger('routerTransition', [ state('void', style({})), state('*', style({})), transition(':enter', [ style({transform: 'translateX(100%)'}), animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})) ]), transition(':leave', [ style({transform: 'translateX(0%)'}), animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'})) ]) ]); } export function slideToBottom() { return trigger('routerTransition', [ state('void', style({})), state('*', style({})), transition(':enter', [ style({transform: 'translateY(-100%)'}), animate('0.5s ease-in-out', style({transform: 'translateY(0%)'})) ]), transition(':leave', [ style({transform: 'translateY(0%)'}), animate('0.5s ease-in-out', style({transform: 'translateY(100%)'})) ]) ]); } export function slideToTop() { return trigger('routerTransition', [ state('void', style({})), state('*', style({})), transition(':enter', [ style({transform: 'translateY(100%)'}), animate('0.5s ease-in-out', style({transform: 'translateY(0%)'})) ]), transition(':leave', [ style({transform: 'translateY(0%)'}), animate('0.5s ease-in-out', style({transform: 'translateY(-100%)'})) ]) ]); }
四、路由切換視圖使用動畫ide
import {routerTransition} from '../router.animations'; @Component({ ... animations: [routerTransition()] ... }) <div [@routerTransition]></div>
angular4 的動畫使用動畫