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. + +
+ + The 'background-color' of an 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;
+		}
+	}
+	
+
+ +
+ The 'opacity' of an element can be transitioned when the element changes + to or from ''display: none'': + +
+	#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. +
+ +Global, name-defining at-rules such as ''@keyframes'', ''@font-face'', and +''@layer'' are allowed inside ''@starting-style'', and when present behave as +if they were outside of ''@starting-style''. + +### The 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}