overlay, starting-style, discrete animations #688
Conversation
|
Please use "conventional commit" style messages for PR titles. It automatically triggers release-please mechanism. |
OK. I didn't know about this, but it looks like it makes a lot of sense. So basically, I just need to prefix the title with Are we doing this on any other repos? Is there anything else I should know? |
Correct! You could also use
I know these repos are using it |
…hidden (#690) <!-- 🙌 Thanks for contributing! Adding details below will help us to merge your PR faster. --> ### Description In #688, part of the work was to add descriptions of the new specific animation behavior of certain "discrete" animated properties — `display`, `content-visibility`, and `overlay` — when animating from a hidden state or a visible state. However, on talking to some Chrome engineering folks about this, I realized that some of my descriptions were not quite right. This PR aims to fix those descriptions. The description I was sent by the Chrome engineering folk is as follows: "The idea behind "p = 1" is that during transitions between certain values for certain properties which we consider invisible to visible or vice versa, the browser will automatically choose the "visible" option for the duration of the animation it creates. For example, if you transition from "display:none" to "display:block", the element will be "display:block" for the entire animation created by the transition. And likewise if you transition from "display:block" to "display:none", the element will be "display:block" for the entire animation created by the transition. However, if you transition from "display:flex" to "display:block", the element's display value will switch halfway through the animation. This behavior is applied to content-visibility:hidden, display:none, visibility:hidden, and overlay:none." <!-- ✍️ Summarize your changes in one or two sentences --> ### Motivation <!-- ❓ Why are you making these changes and how do they help? --> ### Additional details <!-- 🔗 Link to documentation, bug trackers, source control, or other places providing more context --> ### Related issues and pull requests <!-- 🔨 If this fully resolves a GitHub issue, use "Fixes #123" --> <!-- 👉 Highlight related pull requests using "Relates to #123" --> <!-- ❗ If another pull request should be merged first, use "**Depends on:** #123" -->
Description
Summary
This PR adds multiple related features that go together to enable the creation of exit/entrance animations using simple CSS, or to put it another way, animating to/from
display: none, or animating elements when they have just been added to the DOM.Specifically, these are:
@starting-style: Chrome 117overlayproperty: Chrome 117display: noneandcontent-visibility: hidden: Chrome 116transition-behaviorproperty: Chrome 117 (this was already added, but it is related, so I checked it)See my research document for more details of what this project aims to add.
Motivation
Additional details
Related issues and pull requests