我正在玩动画API，我想创建一个可重复使用的动画，比如说在内容上滑动顶级的路由器视图。我设法获得了时髦的元数据语法(这实际上非常酷，一旦超越了使用元数据的疯狂想法)，以获得动画主要工作。
@Component({
//moduleId: module.id,selector: 'album-display',templateUrl: './albumDisplay.html',animations: [
trigger('slideIn',[
state('*',style({
transform: 'translateX(100%)',})),state('in',style({
transform: 'translateX(0)',state('out',style({
transform: 'translateX(-100%)',transition('* => in',animate('600ms ease-in')),transition('in => out',animate('600ms ease-in'))
])
]
})
export class AlbumDisplay implements OnInit {
slideInState = 'in';
...
}
然后将其分配给组件中的顶级元素：
<div class="container" [@slideIn]="slideInState">
所以这样做是有效的，但是如何使这个可重用？我不想把这个元数据粘贴到每个视图上。由于这是元数据，我不知道如何使这个可重用。
一种可能的方法是将动画触发代码放在单独的文件中，并将其导出为常量变量，并在组件中使用它。
//animations.ts
import { trigger,state,style,transition,animate } from '@angular/core';
export const slideIn = trigger('slideIn',[
state('*',style({
transform: 'translateX(100%)',style({
transform: 'translateX(0)',style({
transform: 'translateX(-100%)',animate('600ms ease-in'))
]);
//album-display.component.ts
import { slideIn } from './animations'; // path to your animations.ts file
@Component({
//moduleId: module.id,animations: [
slideIn
]
})
export class AlbumDisplay implements OnInit {
slideInState = 'in';
...
}
