[selectors-4] Add syntax to establish before-change style for css-transitions on new elements. #8174
Description
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 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.
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.
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.:
@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.