我怎样才能延迟 *ngFor 的每个项目一个接一个地制作动画？
我的意思是这样的：
<li *ngFor="let item of items"> //end result like below:
<a [@flyIn]="'in'">first item</a> // delay 100ms and animate
<a [@flyIn]="'in'">first item</a> // delay 200ms and animate
<a [@flyIn]="'in'">first item</a> // delay 300ms and animate
<a [@flyIn]="'in'">first item</a> // delay 400ms and animate
<a [@flyIn]="'in'">first item</a> // delay 500ms and animate
</li>
我是否需要以某个时间间隔将项目添加到项目数组中，或者可能有一些更简单的方法？
我正在尝试在一行文本上应用淡入淡出动画。我想让它定期进行（类似于文本闪烁）。我正在使用 Observable 进行状态触发。
这是我的动画数组：
animations: [
trigger('showhide', [
state('invisible', style({opacity: '0', visibility: 'hidden'})),
state('visible', style({opacity: '1', visibility: 'visible'})),
transition('invisible <=> visible', animate('2s linear'))
])
]
我正在使用的变量：
heading = 'invisible';
index: number = 0;
headingarray = [
"Heading 1",
"Heading 2",
"Heading 3"
]
可观察：
Observable.interval(2000)
.subscribe(x => {
console.log(x);
this.heading = (this.heading == 'visible') ? 'invisible' : 'visible';
this.index = (x / 2) % 3
})
这是 HTML：
<h2 [@showhide]="heading">
{{headingarray[index]}}
</h2>
它正在部分工作。如果我将标题的初始值设置为“不可见”，则只有淡入效果有效，反之亦然。
间隔处理似乎有问题。（我想知道这是否可以在没有 Observable 的情况下完成）
我尝试使用 Angular …
我试图在组件的参数更改时触发动画，但只能在组件第一次路由到时执行动画。使用不同参数对该组件的所有后续导航都不会触发动画。
例如，请参阅此 plunker。
从导航时
/home
到
/home/animated/1
动画正在执行。如果只有 ID 更改，例如
/home/animated/2
什么也没有发生。我错过了什么或者这是预期的行为？
我在列表组件上使用角度动画，即滑入式动画。当列表很短时它可以正常工作，但是当我在列表中有超过 50 个项目时，动画会滞后。那是什么原因呢？如何解决？
我正在研究用于显示和隐藏组件的动画.
我的Plunker:https://embed.plnkr.co/BxT8SKBq8JwuPP16FDu4/
<animation [@toggleHeight]="isShow"></animation>
<button (click)="isShow = (isShow==='show')? 'hide' : 'show'">Toggle</button>
<calc></calc>
当点击按钮时,我希望"动画"div消失,但事实并非如此."动画"组件内的内容仍然显示.
难道我做错了什么？任何帮助都会很棒.先感谢您.
我正在尝试使用Angular 2动画“滑动切换”一个元素。
https://plnkr.co/edit/Dof60vwHp79eiThhj9vW?p=preview
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss'],
animations: [
trigger('toggleHeight', [
state('inactive', style({
height: '0',
})),
state('active', style({
height: '100%' //this.el.nativeElement.scrollHeight + 'px'
})),
transition('inactive => active', animate('300ms ease-in')),
transition('active => inactive', animate('300ms ease-out'))
])
]
})
上面的代码可以工作，但是我看不到高度的过渡。我知道在CSS中用'auto'值设置'height'属性的动画是不可能的。
为了自动生成高度，是否可以将其设置为
state('active', style({
height: this.nativeElement.height + 'px'
})),
？
谢谢。