Angular 暂停角度动画

是否可以在Angular 2+中暂停动画？我想在将鼠标移到某个元素上时暂停动画，并从鼠标移出时停止的位置恢复动画

我创建了一个简单的脚本来演示：

以下是我的组件：

从'@angular/core'导入{Component，ElementRef，ViewChild}；
从“@angular/animations”导入{trigger，state，style，animate，transition}；
@组成部分({
选择器：“我的应用程序”，
模板：`
停下来！
`,
风格：[`
.集装箱{
高度：30px；
溢出：隐藏；
位置：相对位置；
宽度：100%；
}
.滚动文本{
位置：绝对位置；
空白：nowrap；
}
/*下面无法暂停*/
.滚动文本：悬停，.容器：悬停{
-moz动画播放状态：暂停；
-webkit动画播放状态：暂停；
动画播放状态：暂停；
}
`],
动画：[
触发器（'滚动'[
状态（'on'，样式（{left:'-100px'}）），
转换（'*=>*'[
样式（{left:'-100px'}），
动画（10000，样式（{左：'100%}））
])
])
]
})
导出类AppComponent{
状态=0；
scrollDone（）{
这个.state++；
}
}

我尝试了

动画播放状态：暂停没有运气：

。滚动文本：悬停，.容器：悬停{
-moz动画播放状态：暂停；
-webkit动画播放状态：暂停；
动画播放状态：暂停；
}

有什么方法可以让它工作吗？
我找到了一种使用
AnimationBuilder
的方法

从'@angular/core'导入{Component，ElementRef，ViewChild}；
从“@angular/animations”导入{style，animate，AnimationBuilder，AnimationPlayer}；
@组成部分({
选择器：“我的应用程序”，
模板：`
停下来！
`,
风格：[`
.集装箱{
高度：30px；
溢出：隐藏；
位置：相对位置；
宽度：100%；
}
.滚动文本{
位置：绝对位置；
空白：nowrap；
}
`]
})
导出类AppComponent{
@ViewChild（“el”）el:ElementRef；
私有工厂=this.builder.build([
样式（{left:'-100px'}），
动画（10000，样式（{左：'100%}））
]);
私人玩家；
构造函数（私有生成器：AnimationBuilder）{}
恩戈尼尼特（）{
this.player=this.factory.create（this.el.nativeElement，{}）；
这个。动画（）；
}
私有动画（）{
这个.player.reset（）；
这个.player.onDone（（）=>{
这个。动画（）；
});
这个.player.play（）；
}
}

但这不是最好的解决方案。
自

在RenderAnimationPlayer内创建WebAnimationPlayer的另一个实例

您可以通过以下方式进行检查：

 console.log(this.player._renderer.engine.players.length);

当然，在你的情况下，这不是关键，但仍然是。
当您尝试在mousemove事件中重用动画时，这一点就开始发挥作用。然后Angular可以创建多达1000名玩家。并溢出内存

如果要更高效地重用动画，则应重用现有播放器

还是打电话

 if (this.player) {
      this.player.destroy();
 }

以前

this.player = this.factory.create(this.el.nativeElement, {}); 

谢谢你的回答，谢尔盖。这是个好消息。实际上，我已经修改了我的演示以重用播放器，但看起来我从未更新过我的答案。我现在已经做到了。
this.player = this.factory.create(this.el.nativeElement, {});