您如何在角度2中创建可重复使用的动画

发布时间：2020-12-17 08:05:04 所属栏目：安全来源：网络整理

导读：我正在玩动画API，我想创建一个可重复使用的动画，比如说在内容上滑动顶级的路由器视图。我设法获得了时髦的元数据语法(这实际上非常酷，一旦超越了使用元数据的疯狂想法)，以获得动画主要工作。 @Component({ //moduleId: module.id,selector: 'album-displ

我正在玩动画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';
    ...
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!