Skip to content

Commit

Permalink
[css-transitions-2] Convert a few sections from tabs to spaces, to fi…
Browse files Browse the repository at this point in the history 
…x warnings.
  • Loading branch information
@dbaron
dbaron committed Aug 17, 2023
1 parent a962483 commit 75cecb9
Showing 1 changed file with 105 additions and 105 deletions.
210 changes: 105 additions & 105 deletions css-transitions-2/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,10 @@ spec:web-animations-1; type:dfn;

<h2 id="delta">Delta specification</h2>

<p>This is a delta specification, meaning that it currently contains
only the differences from CSS Transitions Level 1 [[!CSS3-TRANSITIONS]].
Once the Level 1 specification is closer to complete, it will be merged
with the additions here into a complete level 2 specification.</p>
<p>This is a delta specification, meaning that it currently contains
only the differences from CSS Transitions Level 1 [[!CSS3-TRANSITIONS]].
Once the Level 1 specification is closer to complete, it will be merged
with the additions here into a complete level 2 specification.</p>


# Transitions # {#transitions}
Expand Down Expand Up @@ -241,66 +241,66 @@ because they lack a [=before-change style=].

<div class=example>

The 'background-color' of an <code>h1</code> element can be transitioned
from transparent to green when it is initially rendered:

<pre class=lang-css>
h1 {
transition: background-color 1.5s;
background-color: green;
}
@starting-style {
h1 {
background-color: transparent;
}
}
</pre>

Conditional rules can be used with CSS Nesting:

<pre class=lang-css>
h1 {
transition: background-color 1.5s;
background-color: green;
@starting-style {
background-color: transparent;
}
}
</pre>
The 'background-color' of an <code>h1</code> element can be transitioned
from transparent to green when it is initially rendered:

<pre class=lang-css>
h1 {
transition: background-color 1.5s;
background-color: green;
}
@starting-style {
h1 {
background-color: transparent;
}
}
</pre>

Conditional rules can be used with CSS Nesting:

<pre class=lang-css>
h1 {
transition: background-color 1.5s;
background-color: green;
@starting-style {
background-color: transparent;
}
}
</pre>
</div>

<div class=example>
The 'opacity' of an element can be transitioned when the element changes
to or from ''display: none'':

<pre class=lang-css>
#target {
transition-property: opacity, display;
transition-duration: 0.5s;
display: block;
opacity: 1;
@starting-style {
opacity: 0;
}
}
#target.hidden {
display: none;
opacity: 0;
}
</pre>

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 <code>hidden</code> 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 <code>#target.hidden</code> rule makes
'opacity' transition from ''1'' to ''0'' when the <code>hidden</code>
class is added.
The 'opacity' of an element can be transitioned when the element changes
to or from ''display: none'':

<pre class=lang-css>
#target {
transition-property: opacity, display;
transition-duration: 0.5s;
display: block;
opacity: 1;
@starting-style {
opacity: 0;
}
}
#target.hidden {
display: none;
opacity: 0;
}
</pre>

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 <code>hidden</code> 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 <code>#target.hidden</code> rule makes
'opacity' transition from ''1'' to ''0'' when the <code>hidden</code>
class is added.
</div>

Global, name-defining at-rules such as ''@keyframes'', ''@font-face'', and
Expand Down Expand Up @@ -677,50 +677,50 @@ elem.getAnimations()[0].transitionProperty // 'opacity'

<h2 id="issues-common">Issues commonly raised as issues with previous levels</h2>

<p>
These issues were commonly reported issues
with the previous level of the specification.
</p>

<div class="issue">
<p>
More powerful timing function syntax
is a common request from developers.
See, for example:
<a href="https://lists.w3.org/Archives/Public/www-style/2013Jun/0376.html">2013 message</a>
or
<a href="https://lists.w3.org/Archives/Public/public-fx/2015JulSep/thread.html#msg34">2015 thread</a>.
</p>
</div>

<div class="issue">
<p>
Developers frequently have to trigger style flushes
in order to force transitions to start.
It would be good to have an API
that would avoid this requirement.
See, for example,
<a href="https://lists.w3.org/Archives/Public/www-style/2011Mar/0729.html">2011 proposal</a>.
</p>
</div>
<p>
These issues were commonly reported issues
with the previous level of the specification.
</p>

<div class="issue">
<p>
More powerful timing function syntax
is a common request from developers.
See, for example:
<a href="https://lists.w3.org/Archives/Public/www-style/2013Jun/0376.html">2013 message</a>
or
<a href="https://lists.w3.org/Archives/Public/public-fx/2015JulSep/thread.html#msg34">2015 thread</a>.
</p>
</div>

<div class="issue">
<p>
Developers frequently have to trigger style flushes
in order to force transitions to start.
It would be good to have an API
that would avoid this requirement.
See, for example,
<a href="https://lists.w3.org/Archives/Public/www-style/2011Mar/0729.html">2011 proposal</a>.
</p>
</div>

<h2 id="issues-spec">Issues deferred from previous levels of the spec</h2>

<p>
These issues were in previous levels of the specification,
but may not turn out to be important in this level either.
</p>

<div class="issue">
We may ultimately want to support a keypath syntax
for the 'transition-property' property.
A keypath syntax
would enable different transitions
to be specified
for components of a property.
For example
the blur of a shadow
could have
a different transition
than the color of a shadow.
</div>
<p>
These issues were in previous levels of the specification,
but may not turn out to be important in this level either.
</p>

<div class="issue">
We may ultimately want to support a keypath syntax
for the 'transition-property' property.
A keypath syntax
would enable different transitions
to be specified
for components of a property.
For example
the blur of a shadow
could have
a different transition
than the color of a shadow.
</div>

0 comments on commit 75cecb9

Please sign in to comment.