diff --git a/css-transitions-2/Overview.bs b/css-transitions-2/Overview.bs index 9908b84e6d8..93687e15762 100644 --- a/css-transitions-2/Overview.bs +++ b/css-transitions-2/Overview.bs @@ -167,6 +167,125 @@ Each time a new transition is generated, the current value of the (already incremented) current transition generation is stored as the transition's transition generation. +## Defining [=before-change style=]: the ''@starting-style'' rule + +In Level 1 of this specification, transitions can only start during a +[=style change event=] for elements which have a defined [=before-change style=] +established by the previous [=style change event=]. That means a transition +could not be started on an element that was not being rendered for the previous +[=style change event=] (see: [[css-transitions-1#starting]]). + +In some cases it makes sense to start transitions on newly inserted elements or +elements that change from not [=being rendered=] to being rendered. To allow +for that, this specification introduces ''@starting-style''. + +The @starting-style rule is a +grouping rule. The style rules inside it are used to establish styles to +transition from, if the previous [=style change event=] did not establish a +[=before-change style=] for the element whose styles are being computed. + +Note: This means that ''@starting-style'' rules only apply to some elements +during a computed style update, namely elements that were not rendered or part +of the DOM during the previous [=style change event=]. + +Define starting style for an element as the [=after-change style=] +with ''@starting-style'' rules applied in addition. If an element does not have +a [=before-change style=] for a given [=style change event=], the +[=starting style=] is used instead of the [=before-change style=] to compare +with the [=after-change style=] to start transitions +([[css-transitions-1#starting]]). + +The rules inside ''@starting-style'' cascade as any other grouped style rules +without introducing any new ordering to the cascade, which means rules inside +''@starting-style'' do not necessarily win over those outside. + +Style rules in ''@starting-style'' do not apply to [=after-change style=]. +Thus, the presence of matching rules in ''@starting-style'' can cause +transitions to occur on elements that otherwise could not have transitions +because they lack a [=before-change style=]. + +[=Starting style=] inherits from the parent's [=after-change style=] just like +[=after-change style=] does. + +
h1
element can be transitioned
+ from transparent to green when it is initially rendered:
+
+ + h1 { + transition: background-color 1.5s; + background-color: green; + } + @starting-style { + h1 { + background-color: transparent; + } + } ++ + Conditional rules can be used with CSS Nesting: + +
+ h1 { + transition: background-color 1.5s; + background-color: green; + @starting-style { + background-color: transparent; + } + } ++
+ #target { + transition-property: opacity, display; + transition-duration: 0.5s; + display: block; + opacity: 1; + @starting-style { + opacity: 0; + } + } + #target.hidden { + display: none; + opacity: 0; + } ++ + The display is transitioning to allow for an opacity transition before + flipping from ''display:block'' to ''display:none''. + + Specifying ''opacity: 0'' in the ''@starting-style'' rule means the + element will transition opacity from ''0'' to ''1'' when inserted into + the tree or when the
hidden
class flips 'display' from
+ ''display/none'' to ''display/block'' as the target element does not
+ already have a [=before-change style=] in those cases.
+
+ Specifying ''opacity: 0'' in the #target.hidden
rule makes
+ 'opacity' transition from ''1'' to ''0'' when the hidden
+ class is added.
+CSSStartingStyleRule
interface
+
+The {{CSSStartingStyleRule}} interface represents a ''@starting-style'' rule.
+
++[Exposed=Window] +interface CSSStartingStyleRule : CSSGroupingRule { +}; ++ + # Application of transitions # {#application} ## Animation composite order ## {#animation-composite-order}