Search code examples
javascriptangularangular8angular-directive

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

[Code] I have a directive that I would like to animate an arbitrary element in the DOM. I feel like I am doing something wrong here -

// 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();

I have tried this answer from a similar thread (replace directive with a template-less component), but to no avail.

The accepted answer from that thread works, but I want to understand why my method doesn't since I am querying an arbitrary DOM element and trying to apply an animation.

Solution

  • You're using totally different API, which does different things - hence why it's not working.

    You are using a native html animate, while the example is using the angular's animations.

    In your example you defined one keyframe and no duration. As per specs, this means the animation won't play, since there is no delay between different frames.