Angular 4动画可淡入和淡出视图

I just want the view to fade in and out on route change. I have setup the component correctly it seems but need to get the animation syntax correct I think.This is my current animation attempt.I import this animation to my component:import {trigger, state, animate, style, transition} from '@angular/animations';export function routerTransition() { return fadeInAndOut();}function fadeInAndOut() { return trigger('routerTransition', [ transition(':enter', [ style({opacity: 0}), animate(3000, style({opacity: 1})) ]), transition(':leave', [ animate(3000, style({opacity: 0})) ]) ]);}This is one of my components importing the transition:import { Component } from "@angular/core";import { routerTransition } from "../../animations/fade.animation";@Component({ selector: "about-users", templateUrl: "./about.component.html", animations: [routerTransition()], host: { '[@routerTransition]': '' }})export class AboutComponent { constructor() { }} 解决方案 This works for me for the routing animation:Typescript: .... animations: [ trigger('routerTransition', [ transition('* <=> *', [ query(':enter, :leave', style({ position: 'fixed', opacity: 1 })), group([ query(':enter', [ style({ opacity:0 }), animate('1000ms ease-in-out', style({ opacity:1 })) ]), query(':leave', [ style({ opacity:1 }), animate('1000ms ease-in-out', style({ opacity:0 }))]), ]) ]) ]) ]HTML:<nav> <a routerLink="/page1" routerLinkActive="active">Page1</a> <a routerLink="/page2" routerLinkActive="active">Page2</a></nav><br><br><main [@routerTransition]="page.activatedRouteData.state"> <router-outlet #page="outlet"></router-outlet></main>DEMO 这篇关于Angular 4动画可淡入和淡出视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！