我只想让 View 在路线更改时淡入淡出。我似乎已经正确设置了组件,但我认为需要正确设置动画语法。
这是我目前的动画尝试。 我将此动画导入我的组件:
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() {
}
}
最佳答案
这对我来说适用于路由动画:
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>
关于用于淡入淡出 View 的 Angular 4 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46408582/