如何在Angular 2中创建可重复使用的动画 [英] How do you create reusable Animations in Angular 2

问题描述

我正在使用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中创建可重复使用的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！