[csswg-drafts] [selectors-4] Add pseudo-class to differentiate loading from dynamically added content (#8175)

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

== [selectors-4] Add pseudo-class to differentiate loading from dynamically added content ==
A common developer frustration I've heard around animations is that there's not really a good way to animate new content without also animating it when the page loads. A common way developers work around this is to add a class to the root once the page has loaded. This class can be used on animation rules so that content which was initially visible doesn't animate in.

E.g.
```html
<style>
/* Only animate in elements added after document loads. */
.loaded .element {
  animation: entry 200ms;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => { document.body.classList.add('loaded'); });
</script>
```

Seems like it would be really useful to add this as a built-in pseudo-class. My strawman proposal would be to match the pseudo-class `:loaded` after the load event has been dispatched. Then developers could match this pseudo to specify entry animations only when an element was not part of the original document.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8175 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:31:37 UTC