用于淡入淡出的角度4动画

我只想让视图淡入淡出路线变化。我已经正确地设置了组件，但似乎需要获得我认为正确的动画语法。用于淡入淡出的角度4动画

这是我目前的动画尝试。我导入此动画，我的组件：

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

这是我的部件进口过渡的一个：

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

来源

2017-09-25 AngularM

这对我的作品的路由动画：

打字稿：

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

来源

2017-09-25 15:17:59 Vega

我已经试过了，没有转换发生，我没有得到任何控制台错误。你能告诉我你的组件吗？ – AngularM

我发现，你需要将显示器设置为阻止对动画的工作，像这样：

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

此外，使用最新的Angular，您需要使用HostBinding而不是host。

请参阅我的完整文件：

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

}

来源

2018-02-06 07:55:41 bnussey

用于淡入淡出的角度4动画

回答

相关问题