我正在提交...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
当前行为
我正在使用AnimationFactory和AnimationPlayer来创建一些动画。我注意到AnimationPlayer只能使用一次,当动画完成后它不能重放,我不确定这是设计破坏了AnimationPlayer onFinish还是一个bug
预期行为
对我来说,它应该是可重用的,因此当做.reset()/.restart()
时,动画可以重新播放,即使它已经完成了。如果你想一遍又一遍地使用同一个动画,这将是有意义的。
最大限度地减少了使用说明时问题的重现
ngAfterViewInit() {
this.collapseAnimation = this.animationBuilder.build([
style({ overflow: "hidden" }),
animate("200ms ease-out", style({
height: "50px"
}))
]).create(this.content.nativeElement)
this.expandAnimation = this.animationBuilder.build([
style({ overflow: "hidden" }),
animate("200ms ease-in", style({
height: "100%"
}))
]).create(this.content.nativeElement);
}
toggle() {
if (this.isExpanded) {
this.collapseAnimation.restart();
} else {
this.expandAnimation.restart();
}
this.isExpanded = !this.isExpanded;
}
示例:
https://stackblitz.com/edit/animation-player-re-create的最大值
注意:我没有在演示中包括动画填充。
Angular 版本:4.3.4
5条答案
按热度按时间5lwkijsr1#
我也遇到了同样的问题,.onDone回调没有传递任何有意义的参数或访问回组件代码以创建新示例。这与模板中的[.done]="”不同。我的描述在这里https://stackoverflow.com/q/45844889/8475213
puruo6ea2#
我也遇到了同样的问题。重新创建动画是保证onDone回调被激发的唯一方法。
kqlmhetl3#
我打算明天发布我的代码,我能够在玩家的onDone()事件中使用一个胖箭头函数来实现我的目标;这将按预期保留组件范围....
2017年8月26日星期六上午7:26 marcusbelcher***@***.***〉写道:我也遇到了同样的问题。重新创建动画是保证回调被触发的唯一方法。-你收到这封邮件是因为你发表了评论。直接回复这封邮件,在GitHub〈#18789(comment)〉上查看,或者将线程静音< https://github.com/notifications/unsubscribe-auth/AE9xTN-40DtFk1qwftq5zTWtHxpGdjS9ks5scCr5gaJpZM4O8Pnu >。
zte4gxcn4#
好,我很高兴看到这个问题得到了认可,两天前开始研究变通方案;我发明了a workaround,它只是不断地示例化播放器并销毁旧的播放器
uxhixvfz5#
我不确定这是一个bug,
AnimationPlayer
示例确实可以重播不止一次,提供的stackblitz的问题是它没有重置不应该再动画的播放器。使用此更改:
一切都按预期工作(正如您可以从这个fork of the stackblitz中看到的)
或更干净地
我们可以重置两个动画,只播放我们感兴趣的动画:
重置另一个动画是必要的,因为否则两个动画将彼此冲突,例如,请参见other fork of the stackblitz,我调整了代码,使其具有较慢的展开速度,并且没有折叠。我在那里添加了一个按钮,将动画的位置设置为97%。如果您单击该按钮(在至少运行一次动画之后)您将看到它从97%的动画开始,并转到100%(重要:即使在动画完成后也会发生这种情况,这意味着动画在完成时不会停止/暂停)。
这基本上是当另一个动画没有重置时发生的情况,基本上如果您尝试运行塌陷动画而不重置展开动画,则展开动画仍将尝试设置样式动画,这意味着它将中断塌陷动画(就像您一直单击“转到100%”按钮,而塌陷动画尝试执行其操作)。
关于在重置播放器后未触发onDone回调,这是一个不同的issue,已在PR #46364中修复