ERROR Found the synthetic property @routerTransition

輸入圖片說明

問題分析:

一、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 的動畫使用動畫

  • 一、引入angular4動畫包
  • 二、應用根model導入BrowserAnimationsModule
  • 三、編寫切換動畫效果
  • 四、經過指令引入動畫
相關文章
相關標籤/搜索