Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[css-transitions] The effect of transition-behavior also depends on the values attempting transition, not just the properties #11612

Open
Loirooriol opened this issue Jan 30, 2025 · 1 comment
Open

[css-transitions] The effect of transition-behavior also depends on the values attempting transition, not just the properties #11612

Loirooriol opened this issue Jan 30, 2025 · 1 comment
Labels
css-transitions-2

Comments

@Loirooriol
Copy link
Contributor

https://drafts.csswg.org/css-transitions-2/#transition-behavior-property

When normal is 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.
@birtles
Copy link
Contributor

birtles commented Jan 31, 2025

Yes, the animation type is always dependent on the specific values involved, not just the properties. I think the definition of transition-behaviour should refer to the values rather than the properties.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-transitions-2
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@birtles @Loirooriol