指令如何在 DOM 中的某个父元素上播放动画？

Question

[Code] 我有一个指令，我想为 DOM 中的任意元素设置动画。我觉得我在这里做错了什么 -

// this returns the right element
this.panelParentElement = this.element.closest('.cdk-overlay-pane') as HTMLElement;

const animation = this.panelParentElement.animate([{ width: '100vw', height: '100vh' }]);
animation.play();

我在类似的线程中尝试过这个（用无模板组件替换指令），但无济于事。

接受的答案有效，但我想了解为什么我的方法无效，因为我正在查询任意 DOM 元素并尝试应用动画。

Answer 1

您使用的是完全不同的 API，它们执行不同的操作 - 因此它无法正常工作。

您使用的是原生 html animate, while the example is using the angular's animations.

在您的示例中，您定义了一个关键帧并且没有持续时间。根据规范，这意味着动画不会播放，因为不同帧之间没有延迟。

指令如何在 DOM 中的某个父元素上播放动画？

How can a directive play an animation on some parent element in the DOM?

javascript

angular

angular8

angular-directive