Skip to content

Commit

Permalink
fix: descriptions of discrete animation behavior between visible and …
Browse files Browse the repository at this point in the history
…hidden (mdn#690)

<!-- 🙌 Thanks for contributing! Adding details below will help us to
merge your PR faster. -->

### Description

In mdn#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 mdn#123" -->
<!-- 👉 Highlight related pull requests using "Relates to mdn#123" -->
<!-- ❗ If another pull request should be merged first, use "**Depends
on:** mdn#123" -->
  • Loading branch information
chrisdavidmills authored Dec 28, 2023
1 parent 52037c4 commit eb3bd6b
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 13 deletions.
6 changes: 3 additions & 3 deletions css/properties.json
Original file line number Diff line number Diff line change
Expand Up @@ -4483,7 +4483,7 @@
"syntax": "visible | auto | hidden",
"media": "all",
"inherited": false,
"animationType": "discreteHiddenSwapAt0",
"animationType": "discreteButVisibleForDurationWhenAnimatedHidden",
"percentages": "no",
"groups": [
"CSS Containment"
Expand Down Expand Up @@ -4582,7 +4582,7 @@
"syntax": "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>",
"media": "all",
"inherited": false,
"animationType": "discreteNoneSwapAt0",
"animationType": "discreteButVisibleForDurationWhenAnimatedNone",
"percentages": "no",
"groups": [
"CSS Display"
Expand Down Expand Up @@ -7619,7 +7619,7 @@
"syntax": "none | auto",
"media": "visual",
"inherited": false,
"animationType": "discreteSwapAt1",
"animationType": "discreteButVisibleForDurationWhenAnimatedNone",
"percentages": "no",
"groups": [
"CSS Positioning"
Expand Down
5 changes: 2 additions & 3 deletions css/properties.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,8 @@
"byComputedValueTypeNormalAnimatesAsObliqueZeroDeg",
"color",
"discrete",
"discreteHiddenSwapAt0",
"discreteNoneSwapAt0",
"discreteSwapAt1",
"discreteButVisibleForDurationWhenAnimatedHidden",
"discreteButVisibleForDurationWhenAnimatedNone",
"eachOfShorthandPropertiesExceptUnicodeBiDiAndDirection",
"filterList",
"fontStretch",
Expand Down
11 changes: 4 additions & 7 deletions l10n/css.json
Original file line number Diff line number Diff line change
Expand Up @@ -654,14 +654,11 @@
"fr": "discrète",
"ja": "離散値"
},
"discreteHiddenSwapAt0": {
"en-US": "Discrete behavior but when animating from <code>hidden</code> swaps to end value at progress > 0 rather than 0.5"
"discreteButVisibleForDurationWhenAnimatedHidden": {
"en-US": "Discrete behavior except when animating to or from <code>hidden</code> is visible for the entire duration"
},
"discreteNoneSwapAt0": {
"en-US": "Discrete behavior but when animating from <code>none</code> swaps to end value at progress > 0 rather than 0.5"
},
"discreteSwapAt1": {
"en-US": "Discrete behavior but swaps to end value at progress 1 rather than 0.5"
"discreteButVisibleForDurationWhenAnimatedNone": {
"en-US": "Discrete behavior except when animating to or from <code>none</code> is visible for the entire duration"
},
"eachOfShorthandPropertiesExceptUnicodeBiDiAndDirection": {
"de": "wie jede der Kurzschreibweisen Eigenschaften (alle Eigenschaften außer {{cssxref(\"unicode-bidi\")}} und {{cssxref(\"direction\")}})",
Expand Down

0 comments on commit eb3bd6b

Please sign in to comment.