[csswg-drafts] [css-transition-2] Distinguishing between element mounted and switch `display: none` in `@starting-style` (#12351)

otomad has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-transition-2] Distinguishing between element mounted and switch `display: none` in `@starting-style` ==
`@starting-style` can be triggered in various situations, one is when the element is first mounted onto the DOM, and the other is when the element switches the CSS declaration like `display: none` or HTML `hidden` property. However, usually we want to trigger only in one of these situations and not in the other.

The former is similar to the `appear` property in the `<Transition>` component of Vue and React Transition Group. But in many cases, we don't want it to transition while the elements appearing, but rather when switching `display: none` or `hidden`.

How about add a parameter to the `@starting-style` rule to control when it triggers. For example:

```css
.foo {
 @starting-style {
  opacity: 0;
  /* Original, triggered both element mounted and switching hidden properties. */
 }

 @starting-style appear {
  translate: 0 1rem;
  /* Triggered when element mounted only. */
 }

 @starting-style enter {
  scale: 0.9;
  /* Triggered when switching hidden properties only. */
 }
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12351 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 17 June 2025 09:58:09 UTC