我一直在研究 Angular2 文档,似乎没有一种简单的方法可以为动画添加延迟。作为引用,这是我的目标:plunkr using jQuery
我想使用 Angular2 的动画功能,因为这些“条形图”是在循环中生成的。它们动画效果很好,但同时出现。我想以 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]> </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这看起来很相似,但几个月前在最终版本发布之前有人问过这个问题。
最佳答案
在对动画 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!
关于angular - 在 *ngFor 中错开 Angular2 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39702396/