typescript 用于淡入和淡出视图的 Angular 4 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46408582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 animation for fade in and out a view
提问by AngularM
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() {
}
}
回答by Vega
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:
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>
回答by bnussey
I found that you need to set the display to block for animations to work, like so:
我发现您需要将显示设置为阻止动画才能工作，如下所示：
@HostBinding('style.display') display = 'block';
@HostBinding('style.display') display = 'block';
Additionally, with the latest Angular, you need to use HostBindinginstead of host.
此外，与最新的角度，你需要使用HostBinding的替代host。
Please see my complete file:
请看我的完整文件：
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() {
}
}
