Refactor animation and transition event docs

[wbamberg]

This is a work item for #685.

Pages:

• https://developer.mozilla.org/en-US/docs/Web/Events/animationcancel
• https://developer.mozilla.org/en-US/docs/Web/Events/animationend
• https://developer.mozilla.org/en-US/docs/Web/Events/animationiteration
• https://developer.mozilla.org/en-US/docs/Web/Events/animationstart
• https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel
• https://developer.mozilla.org/en-US/docs/Web/Events/transitionend
• https://developer.mozilla.org/en-US/docs/Web/Events/transitionrun
• https://developer.mozilla.org/en-US/docs/Web/Events/transitionstart

[wbamberg]

I have decreed that these events should live off Window, Document, and HTMLElement interfaces (https://drafts.csswg.org/css-animations/#event-handlers-on-elements-document-objects-and-window-objects , https://drafts.csswg.org/css-transitions/#event-handlers-on-elements-document-objects-and-window-objects)

https://developer.mozilla.org/en-US/docs/Web/API/Window#Animation_events
https://developer.mozilla.org/en-US/docs/Web/API/Document#Animation_events
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement#Animation_events

https://developer.mozilla.org/en-US/docs/Web/API/Window#Transition_events
https://developer.mozilla.org/en-US/docs/Web/API/Document#Transition_events
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement#Transition_events

[wbamberg]

@estelle or @a2sheppy or @irenesmith , would one of you mind reviewing these pages please?

[estelle]

I changed the example to a transform for best practice reasons: it's best to avoid animating / transitioning properties that cause a reflow. I added some tags. And on iterationevent, i added that it doesn't happen at the same time as animationend

[estelle]

For transitions, i added what happens when transitionstart and run are at the same time, or if a delay is negative (they're at the same time.

I extended your example and added the comparison b/t transitioncancel and transitionend. (if you cancel, does it end?). I did this only for the window events. Did you want to check it out and see if we should add it to document transition events, etc.?

[wbamberg]

Thanks for the updates to the examples. I think content like this:

The transitionend event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.

If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.

If the transitioncancel event is fired, the transitionend event will not fire.

...is super-helpful. Personally I think it would be better to have it at the start (say, immediately after, or before, the blue box) rather than in with the examples. But I don't feel terribly strongly about this.

Did you want to check it out and see if we should add it to document transition events, etc.?

What if we just add it to the HTMLElement version, then link from the others to that page, since that's the "event target"?

[estelle]

Remove the long examples from Window & Document. Add links to and longer example in HTMLElement:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/animationcancel_event

• https://developer.mozilla.org/en-US/docs/Web/API/Window/animationstart_event

• https://developer.mozilla.org/en-US/docs/Web/API/Window/animationend_event

• https://developer.mozilla.org/en-US/docs/Web/API/Window/animationiteration_event

• https://developer.mozilla.org/en-US/docs/Web/API/Document/animationcancel_event

• https://developer.mozilla.org/en-US/docs/Web/API/Document/animationstart_event

• https://developer.mozilla.org/en-US/docs/Web/API/Document/animationend_event

• https://developer.mozilla.org/en-US/docs/Web/API/Document/animationiteration_event

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationcancel_event

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationiteration_event

• https://developer.mozilla.org/en-US/docs/Web/API/Window/transitionrun_event

• https://developer.mozilla.org/en-US/docs/Web/API/Window/transitionstart_event

• https://developer.mozilla.org/en-US/docs/Web/API/Window/transitionend_event

• https://developer.mozilla.org/en-US/docs/Web/API/Window/transitioncancel_event

• https://developer.mozilla.org/en-US/docs/Web/API/Document/transitionrun_event

• https://developer.mozilla.org/en-US/docs/Web/API/Document/transitionstart_event

• https://developer.mozilla.org/en-US/docs/Web/API/Document/transitionend_event

• https://developer.mozilla.org/en-US/docs/Web/API/Document/transitioncancel_event

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionrun_event

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionstart_event

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitioncancel_event

[estelle]

Added ontransitionstart and ontransitionrun to https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers. Not 100% sure i should have.

Also added type of transitionEvent to https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent

[wbamberg]

Thanks for all your work on this @estelle ! I was thinking about a good wording for this, what do you think about:

The original target for this event is the HTMLElement that had the transition applied. You can listen for this event on the Window interface to handle it in the capture or bubbling phases. For full details on this event please see the page on HTMLElement: transitionstart.

(for example, for the Window: transitionstart page, replacing the para immediately after the blue box?) I like making an explicit reference to bubbling here.

[wbamberg]

I've made sure only the HTMLElement version has the live example, and added links from the Window and Document versions to the HTMLElement page. So I'm calling this one closed.