[csswg-drafts] [selectors-4] Add pseudo-class to establish before-change style for css-transitions on new elements. (#8174)

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

== [selectors-4] Add pseudo-class to establish before-change style for css-transitions on new elements. ==
Transitions are ergonomic and easy to use for changes to property values when there is an existing style to transition from. However, when an element is first added to the page or made not `display: none` it has no previous [before-change](https://www.w3.org/TR/css-transitions-1/#before-change-style) style so developers have to use script to switch from the initial frame state and some state which specifies the post transition style, e.g.

```js
elem.classList.add('visible'); // Removes display: none, but keeps opacity: 0 and other before styles.
elem.offsetTop; // Force style recalc
elem.classList.add('visiblestyle'); // Adds properties to transition to.
```

It would be great if you could do this directly from CSS perhaps via a pseudoclass selector. E.g.

```css
dialog {
  transition: opacity 200ms;
  opacity: 1; /* Not necessary as it is the default but added for illustration. */
}
dialog:initial {
  opacity: 0;
}
```

This `:initial` pseudo-class would match on the initial frame containing a particular element and be removed immediately after style recalc. This does mean we would have to repeat style on that initial frame - hopefully we could target only elements affected by `:initial` selectors.

This would bring parity with what you can do via css animations, e.g.:
```css
@keyframes fade-in {
  from { opacity: 0; }
}
dialog {
  transition: opacity 200ms;
  animation: fade-in 200ms;
  opacity: 1; /* Not necessary as it is the default but added for illustration. */
}
```

Though thinking ahead, I've also heard frustration around the css animation above animating when you load the page - so we should consider where there's a way for developers to differentiate loading vs post load and only apply animations (and initial transition styles) for new elements.

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


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

Received on Friday, 2 December 2022 18:03:43 UTC