Question

我一直在挖掘Angular2文档，但似乎并不是添加动画延迟的简单方法。作为参考，以下是我的目标：plunkr using jQuery

我想使用Angular2的动画功能，因为这些＆＃34; bar＆＃34;正在循环中生成。他们的动画效果很好，但是一下子。我想以1s为增量错开它们。这是我的主要组件文件：

import {
  Component,
  Input,
  trigger,
  state,
  style,
  transition,
  animate
} from '@angular/core';


export class Skill {
  skill: string;
  level: number;
}

const SKILLS: Skill[] = [
    { skill: 'x', level: 70 },
    { skill: 'y', level: 100 },
    { skill: 'z', level: 80 }
]

@Component({
  selector: 'app-wrap',
  template: `
    <div *ngFor="let skill of skills; let i = index" class="skill">
      <span class="bar" [style.width.%]="skill.level" [@expandSkill]>&nbsp;</span>
    </div>
  `,
  animations: [
    trigger('expandSkill', [
      state('in', style({ width: 'auto' })),
      transition('void => *', [
        style({ width: '0' }),
        animate('1000ms ease-in-out')
      ])
    ]
  ]
})

export class AppComponent {
  skills = SKILLS;
}

我遇到的这个other SO question看似相似，但几个月前，在最终版本发布之前就被问过了。

Answer 1

在对着动画DSL进行锤击之后，制作出惊人的动画。我找到了另一种做动画的方法，让人惊愕！

诀窍是使用渲染器和服务来控制动画的指令来保存你的动画商店！

指令重要代码

this.animation = this.renderer.animate(
  this.element.nativeElement.firstElementChild || this.element.nativeElement,
  this.animService.getAnimation(animationName).startingStyles,
  this.animService.getAnimation(animationName).keyframes,
  this.duration,
  this.delay,
  this.easing
);
this.animation.pause();
this.animation.play();

如何在模板

中使用它

<div *ngFor="let str of ['foo','bar','baz']; let i = index"
  anim-aes
  [anim-aes-delay]="i*200"
  [anim-aes-duration]="500"
  [anim-aes-animation]="'fadeIn'"
  [anim-aes-animation-leave]="'fadeOut'"
  [anim-aes-play]="show">
  click {{str}}
</div>

我用你需要的东西做了一个有效的工作！

plunkr

Answer 2

从Angular 4.2.6开始，你可以使用query（），stagger（）和animateChild（）来交错各种动画。这是一个例子：

template: `
    <div [@stagger]>
      <div [@fade] *ngFor="let item of items;">{{item}}</div>
    </div>
  `,
animations: [
    trigger('fade', [
      transition(':enter', [style({opacity: 0}), animate('.6s ease')])
    ]),
    trigger('stagger', [
      transition(':enter', [
        query(':enter', stagger('.3s', [animateChild()]))
      ])
    ])
  ]

Plunker：https://embed.plnkr.co/pQQSZETi7mnToB6lqfID/

Answer 3

令人震惊的模块仍未准备就绪。但是有一些可以达到同样效果的hacky路径。

如果您有一个固定的列表（或至少在屏幕上）。您可以编写一个交错函数，为0到n之间的每个状态返回延迟动画。交错函数应该返回AnimationEntryMetadata []然后。你应该将@expandSkill绑定到循环上的变量i。最后，您将为每个对象创建动态动画。
您可以使用Renderer和ViewChildren查询子项，并使用css样式创建交错动画。渲染器提供setElementStyle。
有一个thirth选项，多一点hacky ..渲染一个新列表，通过setTimeout填充它。

我将这两个用于一些丰富的动画。当然有更好的方法：）

在* ngFor内交错Angular2动画

3 个答案:

指令重要代码

如何在模板