而不是将动画附加到路由到的所有组件,例如this StackOverflow answer或first part of the official documentation。一个例子:
在
hero-detail.component.ts
:import { Component, OnInit } from '@angular/core'; import { fadeInOutAnimation } from "app/app-routing.animation"; @Component({ selector: 'app-home', templateUrl: './home.component.html', animations: [ fadeInOutAnimation(300) ] }) export class HomeComponent{ }
在
app-routing.animation.ts
:import { trigger, state, style, animate, transition } from '@angular/animations'; export const fadeInOutAnimation = function (fadeInTimeMS) { return trigger('fadeInOut', [ transition(':enter', [ // :enter is alias to 'void => *' style({ opacity: 0 }), animate(fadeInTimeMS, style({ opacity: 1 })) ]), transition(':leave', [ // :leave is alias to '* => void' animate(fadeInTimeMS, style({ opacity: 0 })) ]) ]) }
我想根据路径路径设置路线动画:
将路线动画应用于单个组件适用于简单演示,但在现实应用中,最好根据路径路径设置路线动画。
如角度文档中'Adding animations to the routed component'的末尾所述。尽管如此,它并没有扩展如何做到这一点。
答案 0 :(得分:1)
这是一个动画,您可以看到视图在向前移动时从左向右滑动,而在向后移动时可以从右向左滑动,而无需将动画单独添加到组件。
import {animate, AnimationMetadata, group, query, style, transition, trigger} from '@angular/animations';
const leftToRight: AnimationMetadata[] = [
/* order */
/* 1 */ query(':enter, :leave', style({position: 'fixed', width: '100%'})
, {optional: true}),
/* 2 */ group([ // block executes in parallel
query(':enter', [
style({transform: 'translateX(100%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
], {optional: true}),
query(':leave', [
style({transform: 'translateX(0%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'}))
], {optional: true}),
])
];
const rightToLeft: AnimationMetadata[] = [
/* order */
/* 1 */ query(':enter, :leave', style({position: 'fixed', width: '100%'})
, {optional: true}),
/* 2 */ group([ // block executes in parallel
query(':enter', [
style({transform: 'translateX(-100%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(0%)'}))
], {optional: true}),
query(':leave', [
style({transform: 'translateX(0%)'}),
animate('0.5s ease-in-out', style({transform: 'translateX(100%)'}))
], {optional: true}),
])
];
export const routerTransition = trigger('routerTransition', [
transition('first_page => second_page', leftToRight),
transition('second_page => first_page ', rightToLeft),
transition('second_page => third_page', leftToRight),
transition('third_page => second_page', rightToLeft),
]);
并将其导入到AppComponent中,并添加一个函数以返回路由状态。不要忘记我应用的样式。
import {routerTransition} from "./router.animations";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: [`
/deep/ router-outlet ~ * {
position: absolute;
width: 100%;
}
`],
animations: [routerTransition]
})
export class AppComponent implements {
getState(outlet) {
return outlet.activatedRouteData.state;
}
onDeactivate() {
// document.body.scrollTop = 0;
// Alternatively, you can scroll to top by using this other call:
window.scrollTo(0, 0);
}
}
将其作为指令应用于主标记
<main [@routerTransition]="getState(o)">
<router-outlet #o="outlet" (deactivate)="onDeactivate()"></router-outlet>
</main>
答案 1 :(得分:0)
以下是基于路径更改转换的示例:
import {
trigger,
query,
group,
animate,
transition,
style
} from "@angular/animations";
const fade: any = [
transition(':enter', [ // :enter is alias to 'void => *'
style({ opacity: 0 }),
animate(fadeInTimeMS, style({ opacity: 1 }))
]),
transition(':leave', [ // :leave is alias to '* => void'
animate(fadeInTimeMS, style({ opacity: 0 }))
])
];
const transition2: any = [
//other transition
];
export const routerTransition = trigger('routerTransition', [
transition('path1 => *', fade),
transition('path2 => path3', fade),
transition('path3 => path1', transition2),
transition('* => path2', transition2),
]);
然后在组件中使用动画:
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
animations: [
routerTransition
]
})