[css-transitions-2] Implement `@starting-style` to fill in initial state for CSS transitions
Categories
(Core :: CSS Transitions and Animations, enhancement)
Tracking
()
Tracking | Status | |
---|---|---|
firefox127 | --- | fixed |
People
(Reporter: dholbert, Assigned: boris)
References
(Blocks 5 open bugs, )
Details
(Keywords: dev-doc-complete, parity-chrome, parity-safari)
Attachments
(5 files, 1 obsolete file)
This tracks the @starting-style
CSS at-rule, which is a way to specify a starting state to let you play css transitions for elements that have no actual starting style (e.g. if they're coming from display:none
). See summary by Tab in https://github.com/w3c/csswg-drafts/issues/8174#issuecomment-1512244500 for more details.
(At that point they were using the strawman name @initial
, but in today's CSSWG call, we resolved to call it @starting-style
)
I think spec text is still to come, but the above quoted comment from Tab gets the idea across. Also, based on the discussion in the issue, it looks like there's a connection to popover
, though it's also relevant for e.g. an element playing a transition on some property as it loses display:none
.
mozilla-apprentice issues for the resolutions getting us to this point, for reference:
https://github.com/mozilla/wg-decisions/issues/1109
https://github.com/mozilla/wg-decisions/issues/1130
Assignee | ||
Updated•1 year ago
|
Assignee | ||
Comment 1•1 year ago
•
|
||
This was added into [css-transitions-2] already (https://github.com/w3c/csswg-drafts/commit/c9f5f544d0253a28a760a8b0cb0b865a0acdd35c)
Updated•7 months ago
|
Updated•7 months ago
|
Updated•7 months ago
|
Updated•7 months ago
|
Updated•5 months ago
|
Assignee | ||
Comment 2•5 months ago
|
||
Updated•5 months ago
|
Comment 3•5 months ago
|
||
Comment on attachment 9394654 [details]
Bug 1834876 - Part 1: Parse @starting-style rule.
Revision D206428 was moved to bug 1889496. Setting attachment 9394654 [details] to obsolete.
Assignee | ||
Updated•4 months ago
|
Assignee | ||
Updated•4 months ago
|
Assignee | ||
Updated•4 months ago
|
Assignee | ||
Comment 7•4 months ago
|
||
The rules inside @starting-style doesn't apply to primary style, and
they are used only for CSS transitions (when computing starting style).
So adding a flag to make us easier to filter them out.
Assignee | ||
Comment 8•4 months ago
|
||
Per spec, we define starting style for an element as the after-change style
with @starting-style rules applied in addition.
If an element does not have a before-change style for a given style change
event, the starting style is used instead of the before-change style to
compare with the after-change style to start transitions.
The implmentation in process_animations() and tests are in the following
patches.
Assignee | ||
Comment 9•4 months ago
|
||
Now we use the starting style if we have, for CSS transitions.
Assignee | ||
Comment 10•4 months ago
|
||
Add one extra branch if we have before-change style but its display
is none, and the new style is not display:none.
Assignee | ||
Comment 11•4 months ago
|
||
Updated•4 months ago
|
Comment 12•4 months ago
|
||
Pushed by bchiou@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/2016a6631d26 Part 1: Add a flag in Rule if it is inside @starting-style. r=layout-reviewers,firefox-style-system-reviewers,emilio https://hg.mozilla.org/integration/autoland/rev/bb0d11251f9e Part 2: Resolve starting style if we don't have before-change style. r=layout-reviewers,firefox-style-system-reviewers,emilio https://hg.mozilla.org/integration/autoland/rev/f62d69fb6e3f Part 3: Use starting style for CSS Transitions. r=layout-reviewers,firefox-style-system-reviewers,emilio https://hg.mozilla.org/integration/autoland/rev/4a70e54db9b5 Part 4: Fix the case when changing the display from none. r=layout-reviewers,firefox-style-system-reviewers,emilio https://hg.mozilla.org/integration/autoland/rev/a8efeedc6899 Part 5: Enable the preference of @starting-style on Nightly. r=webidl,layout-reviewers,saschanaz,emilio
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/45976 for changes under testing/web-platform/tests
Comment 14•4 months ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/2016a6631d26
https://hg.mozilla.org/mozilla-central/rev/bb0d11251f9e
https://hg.mozilla.org/mozilla-central/rev/f62d69fb6e3f
https://hg.mozilla.org/mozilla-central/rev/4a70e54db9b5
https://hg.mozilla.org/mozilla-central/rev/a8efeedc6899
Upstream PR merged by moz-wptsync-bot
Comment 17•3 months ago
|
||
Release Note Request (optional, but appreciated)
[Why is this notable]: Allows authors to define before-change styles to transition from when they are not defined yet.
[Affects Firefox for Android]: yes
[Suggested wording]: Starting with Firefox 127, @starting-style
is supported in Nightly builds. This at-rule allows to define styles that are applied to an element when it is first rendered, enabling transitions on elements that are added to the DOM or that have their display
type changed from none
to another value.
[Links (documentation, blog post, etc)]: https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
Comment 18•3 months ago
|
||
Note added to our Nightly release notes:
https://www.mozilla.org/en-US/firefox/128.0a1/releasenotes/
https://www.mozilla.org/en-US/firefox/127.0a1/releasenotes/
Comment 19•3 months ago
|
||
Updated•3 months ago
|
Comment 20•2 months ago
•
|
||
Clearing the nighty+ flag since this is riding the trains in Fx129 (Bug 1900458)
Description
•