[css-transitions] The effect of `transition-behavior` also depends on the values attempting transition, not just the properties
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
https://drafts.csswg.org/css-transitions-2/#transition-behavior-property
When
normalis specified, transitions will not be started for discrete properties, only for interpolable properties. When allow-discrete is specified, transitions will be started for discrete properties as well as interpolable properties.
But transition-behavior doesn't just affect properties with a discrete animation type. The effect depends on the values that attempt transition.
For example, width has a "by computed value" animation type, but some values aren't interpolable so they fall back to discrete. Then transition-behavior comes into play:
<!DOCTYPE html>
<style>
#a, #b {
width: min-content;
transition: width 3s -1s linear;
}
</style>
<div id="a" style="transition-behavior: normal"></div>
<div id="b" style="transition-behavior: allow-discrete"></div>
<pre id="pre"></pre>
<script>
document.addEventListener("transitionstart", (e) => {
pre.append("transitionstart on #" + e.target.id + "\n");
})
document.body.offsetLeft;
a.style.width = b.style.width = "100px";
pre.append("#a has width: " + getComputedStyle(a).width + "\n");
pre.append("#b has width: " + getComputedStyle(b).width + "\n");
</script>
Gecko, Blink and Webkit produce
#a has width: 100px
#b has width: 0px
transitionstart on #b
Given the text in the spec, since width is not a discrete property, it may seem that a transition would start even with transition-behavior: normal. But it's not the case for the values used above.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the transition-behavior section in the CSS Transitions Level 2 specification and reproduce the HTML example comparing width values with normal and allow-discrete. Determine how the text should describe value-dependent behavior, with the example's transition output serving as the expected result.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, javascript
- Domain
- documentation
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100