Angular 4动画可淡入和淡出视图 [英] Angular 4 animation for fade in and out a view
本文介绍了Angular 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() {
}
}
解决方案
这对我来说适用于路由动画:
打字稿:
....
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>
演示 >
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>
这篇关于Angular 4动画可淡入和淡出视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文