Intent to Implement and Ship: CSS Transition Events

[Robert Flack]

Contact emails fla...@chromium.org Spec https://www.w3.org/TR/css-transitions-1/#transition-events Summary The CSS Transitions spec specifies that TransitionEvents are sent when a transition is enqueued, starts, ends, or is canceled as transitionrun, transitionstart, transitionend, and transitioncancel respectively. These events mirror the CSS animation events (already shipped) and allow developers to observe transitions in the same way as they can observe animations. Motivation

Blink currently only implements the 'transitionend' event, however there are many circumstances where a transition is not started and developers don't know for sure whether to expect a transitionend. With the transitionrun, transitionstart and transitioncancel events, developers can know when transitions are running.

Two of the top 5 starred Blink>Animation issues are for transitionstart and transitioncancel events. Interoperability risk Firefox: Shipped Edge: Shipped (Except for transitionrun) Safari: Shipped (In tech preview) Web developers: No signals

This is a mature specification which has been shipped to varying degrees in the major browsers. There are web platform tests for these events in wpt/css/css-transitions/event-dispatch.tentative.html. Compatibility risk

Minor, we will be dispatching new events which we have not dispatched before. Blink currently implements only the transitionend event, which has lead to some issues for web developers due to lack of support for starting events. Ongoing technical constraints

None Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)? Yes or no.

Yes OWP launch tracking bug None Link to entry on the Chrome Platform Status https://www.chromestatus.com/features/5673072124231680 Requesting approval to ship?

Yes

[Chris Harrelson]

Hi Rob,

Some questions: 

* Do you have a collection of use cases where these events are useful for providing visual effects?

* How should these events be fit into render timing? e.g. should they be fired at rAF time or not? Should transitionend be fired post-paint but before other work?

I think the answers to the two questions are highly related, and also related to the scheduling APIs intent sent last week.

Thanks,

Chris

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAJh39TNF%3DHJ6%2B%3DmEnB7V40QNHzugXWzPMJqc3SV2MQXOLFu5Cg%40mail.gmail.com.

[Robert Flack]

On Mon, Jan 28, 2019 at 12:54 PM Chris Harrelson <chri...@chromium.org> wrote:

Hi Rob,

Some questions: 

* Do you have a collection of use cases where these events are useful for providing visual effects?

These events are used for coordinating subsequent effects and/or page changes which do not necessarily need to be frame perfect. For example, you may want to remove some DOM after a transition to 0 opacity, or run some subsequent animations and/or update some content after elements become fully opaque.

Because blink has only implemented transitionend, developers have used various setTimeout based workarounds to ensure that you get an event either at transitionend or when it has been long enough to assume the transition either never run or was canceled.

 

* How should these events be fit into render timing? e.g. should they be fired at rAF time or not? Should transitionend be fired post-paint but before other work?

transitionend is already shipped, and is enqueued to fire at rAF time (before the next lifecycle update) on the first main frame after the transition has ended. I.e. these events do not get fired synchronously. Naively, I would do the same for the rest of them (also to be consistent with animation events).

[Brian Birtles]

2019年1月29日火曜日 4時50分35秒 UTC+9 Robert Flack:

On Mon, Jan 28, 2019 at 12:54 PM Chris Harrelson <chri...@chromium.org> wrote:

* How should these events be fit into render timing? e.g. should they be fired at rAF time or not? Should transitionend be fired post-paint but before other work?

transitionend is already shipped, and is enqueued to fire at rAF time (before the next lifecycle update) on the first main frame after the transition has ended. I.e. these events do not get fired synchronously. Naively, I would do the same for the rest of them (also to be consistent with animation events).

This is covered in HTML's processing model under the step "update animations and send events" (i.e. before running rAF callbacks).

Best regards,

Brian

[Joe Medley]

Robert,

Do you have a tracking bug?

Joe

Joe Medley | Technical Writer, Chrome DevRel | jme...@google.com | 816-678-7195

If an API's not documented it doesn't exist.

On Mon, Jan 28, 2019 at 9:10 AM Robert Flack <fla...@chromium.org> wrote:

--

[Robert Flack]

I've created a tracking bug - https://crbug.com/926233. I don't expect the implementation to take long - I already have a rough patch which implements transitionrun and transitionstart.

[Rick Byers]

This seems pretty trivial to me - shipping APIs we're (nearly) at the point of being the last engine to ship. LGTM1

Chris did you have any additional concerns?

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAJh39TMmnhZK%2BeWW_JO6vJ5p9hHhnvZ6Ab5JK%2BwcHcg_EQGdqQ%40mail.gmail.com.

[Philip Jägenstedt]

LGTM2 unless Chris has concerns.

From https://wpt.fyi/results/css/css-transitions/event-dispatch.tentative.html?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned it looks like things are already pretty consistent between Firefox and Safari, so following that should have low compat risk.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY_b5_ggpzEc5ooLxeD4w9NQH%3DDokJUZFyr-JwAZAwRstw%40mail.gmail.com.

[Chris Harrelson]

LGTM3. These event timings sounds good, thanks for clarifying.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAARdPYdhsyUHDy0UcP4BvGnWO9YksXxoF%2B2XA8Pb9Ea%2BWqGdDg%40mail.gmail.com.