问题描述
我正在使用Animation API,我想创建一个可重复使用的动画,例如在顶级路由器视图的内容中滑动.我设法通过了时髦的元数据语法(一旦摆脱了使用元数据的疯狂想法,这实际上很酷)来使动画大部分正常工作.
I'm playing with the Animation API, and I'd like to create a reusable animation like say sliding in content for top level router views. I managed to get through the funky meta data syntax (which is actually pretty cool once get past the crazy idea of using metadata) to get the animations mostly working.
@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';
...
}
然后将其分配给组件中我的顶级元素:
And then assigning that to my top level element in the component:
<div class="container" [@slideIn]="slideInState">
所以这可行,但是如何使它可重用?我不想将此元数据粘贴到每个视图上.由于这是元数据,因此我不确定如何使它可重用.
So this works, but how can I make this reusable? I don't want to stick this meta data onto every view. Since this is metadata I'm not sure how you could make this reusable.
推荐答案
一种可能的方法是将动画触发代码放在单独的文件中,并将其导出为const
变量,然后在组件中使用它,如下所示.
One possible way is to put animation trigger code in separate file and export it as const
variable and use it in component as below.
animations.ts
import { trigger, state, style, transition, animate } from '@angular/core';
export const slideIn = 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'))
]);
相册显示.component.ts
import { slideIn } from './animations'; // path to your animations.ts file
@Component({
//moduleId: module.id,
selector: 'album-display',
templateUrl: './albumDisplay.html',
animations: [
slideIn
]
})
export class AlbumDisplay implements OnInit {
slideInState = 'in';
...
}
这篇关于如何在Angular 2中创建可重复使用的动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!