Angular 4 Animation zum Ein- und Ausblenden

Question

Ich möchte nur, dass die Ansicht bei einer Routenänderung ein- und ausgeblendet wird. Ich habe die Komponente richtig eingerichtet, es scheint aber die Animationssyntax richtig zu bekommen, denke ich.

Dies ist mein derzeitiger Animationsversuch. ich importieren diese Animation auf meine Komponente:

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})) 
    ]) 
    ]); 
} 

Dies ist eine meiner Komponenten importieren den Übergang:

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() { 
    } 
} 

Answer 1

Dies ist für die Routing-Animation funktioniert für mich:

Maschinenschrift:

.... 
    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

Answer 2

Ich fand, dass Sie die Anzeige einstellen müssen blockieren für Animationen, zu arbeiten wie folgt:

@HostBinding('style.display') display = 'block';

Zusätzlich Mit dem neuesten Angular müssen Sie HostBinding stattverwenden 10.

Bitte beachten Sie meine komplette Datei:

import { Component, OnInit, HostBinding } from '@angular/core'; 
import { slideInDownAnimation, fadeInAnimation } from './../checkout-animations'; 

@Component({ 
    selector: 'app-checkout-two', 
    templateUrl: './checkout-two.component.html', 
    styleUrls: ['./checkout-two.component.scss', './../checkout.component.scss'], 
    animations: [slideInDownAnimation] 
}) 

export class CheckoutTwoComponent implements OnInit { 
    @HostBinding('@routeAnimation') routeAnimation = true; 
    @HostBinding('style.display') display = 'block'; 

    constructor() { } 

    ngOnInit() { 
    } 

}