[css-animations-2][css-transitions-2] Add animation object to animation/transition events.

[flackr]

Currently the css-animations-1 AnimationEvent and the css-transitions-1 TransitionEvent only provide details about the animation (its name, and timing) or transition (property and timing), but if you wanted to get the actual Animation object you would have to call getAnimations() on the element and find the corresponding animation. E.g.

element.addEventListener('animationstart', (evt) => {
  // evt does not contain the animation so we have to find it.
  let animation = element.getAnimations().find(anim => anim.animationName == evt.animationName);
});

If the same animation name is started twice, e.g. animation: keyframes 1s, keyframes 1s, the developer doesn't have any way to know which Animation object in the getAnimations list corresponds to the AnimationEvent.

I propose we add the web-animations Animation object for the animation / transition to these events so that developers can easily get the associated Animation from the events. I'd propose calling it animation in both interfaces though we could consider calling it transition in the TransitionEvent interface even though the type would be Animation.

[bramus]

Very much in favor of this. Surprised me it didn’t already give authors the full details.

[flackr]

@birtles FYI

[ydaniv]

Wow, super needed! I was trying for sometime to think how to do that with the missing animation.id, which you only get for WAAPI, but this is much better (:

[birtles]

Sounds great. AnimationPlaybackEvents already expose this through their target property.

[bramus]

Since we’re all in agreement, let’s try and get an async resolution. Proposed resolutions (rewritten from what flackr@ said above) are:

1. Add the web-animations Animation object for the animation / transition to the animation*/transition* events
2. Name the property animation

/ping @astearns

[astearns]

Restating the resolution to make sure I am understanding correctly (thumbs up if this is good, please reply with a correction if I am wrong)

Proposed Resolution: Add an animation property to the animation*/transition* events that contains the relevant Animation object

[astearns]

The CSSWG will automatically accept this resolution one week from now if no objections are raised here. Anyone can add an emoji to this comment to express support. If you do not support this resolution, please add a new comment.

Proposed Resolution: Add an animation property to the animation*/transition* events that contains the relevant Animation object

[birtles]

(Non-substantive clarification to the resolution: the types of the animation property for animation*/transition* events should be CSSAnimation and CSSTransition respectively.)

[astearns]

RESOLVED: Add an animation property to the animation*/transition* events that contains the relevant Animation object (CSSAnimation and CSSTransition respectively)