8000 [css-transitions] Add a note explaining that transitions can start on… · w3c/csswg-drafts@797266b · GitHub
Skip to content

Commit 797266b

Browse files
dbarondbaron
committed
[css-transitions] Add a note explaining that transitions can start on ancestors and descendants at the same time.
This implements the remainder of part C of the proposal in http://lists.w3.org/Archives/Public/www-style/2013Mar/0297.html as resolved in http://lists.w3.org/Archives/Public/www-style/2013Jun/0682.html
1 parent c16d802 commit 797266b

2 files changed

Lines changed: 57 additions & 0 deletions

File tree

‎css-transitions/Overview.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -985,6 +985,27 @@ <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
985985
words, excluding any changes resulting from CSS Transitions that start
986986
during that <a href="#style-change-event">style change event</a>.
987987

988+
<div class=note>
989+
<p> Note that this definition of the <span>after-change style</span> means
990+
that a single change can start a transition on the same property on both
991+
an ancestor element and its descendant element. This can happen when a
992+
property change is inherited from one element with ‘<code
993+
class=css>transition-*</code>’ properties that say to animate the
994+
changing property to another element with ‘<code
995+
class=css>transition-*</code>’ properties that also say to animate the
996+
changing property.
997+
998+
<p> When this happens, both transitions will run, and the transition on
999+
the descendant will override the transition on the ancestor because of
1000+
the normal CSS cascading and inheritance rules (<a href="#CSS3CASCADE"
1001+
rel=biblioentry>[CSS3CASCADE]<!--{{CSS3CASCADE}}--></a>).
1002+
1003+
<p> If the transition on the descendant completes before the transition on
1004+
the ancestor, the descendant will then resume inheriting the (still
1005+
transitioning) value from its parent. This effect is likely not a
1006+
desirable effect, but it is essentially doing what the author asked for.
1007+
</div>
1008+
9881009
<p> For each element with a <span>before-change style</span> and an
9891010
<span>after-change style</span>, and each property (other than shorthands)
9901011
for which the <span>before-change style</span> is different from the
@@ -1736,6 +1757,10 @@ <h2 id=changes><span class=secno>9. </span>Changes since Working Draft of
17361757

17371758
<li>Define that a CSS transition for a property does not affect computed
17381759
style when a CSS Animation for the same property is running.
1760+
1761+
<li>Add a note pointing out that the above definitions imply that
1762+
transitions can start simultaneously, from the same change, on
1763+
ancestors and descendants.
17391764
</ul>
17401765
</ul>
17411766

‎css-transitions/Overview.src.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -977,6 +977,37 @@ <h2 id="starting">
977977
that start during that <span>style change event</span>.
978978
</p>
979979

980+
<div class="note">
981+
<p>
982+
Note that this definition of the <span>after-change style</span>
983+
means that a single change
984+
can start a transition on the same property
985+
on both an ancestor element and its descendant element.
986+
This can happen when a property change is inherited
987+
from one element with 'transition-*' properties
988+
that say to animate the changing property
989+
to another element with 'transition-*' properties
990+
that also say to animate the changing property.
991+
</p>
992+
993+
<p>
994+
When this happens, both transitions will run,
995+
and the transition on the descendant will override
996+
the transition on the ancestor
997+
because of the normal
998+
CSS cascading and inheritance rules ([[CSS3CASCADE]]).
999+
</p>
1000+
1001+
<p>
1002+
If the transition on the descendant completes before
1003+
the transition on the ancestor,
1004+
the descendant will then resume inheriting
1005+
the (still transitioning) value from its parent.
1006+
This effect is likely not a desirable effect,
1007+
but it is essentially doing what the author asked for.
1008+
</p>
1009+
</div>
1010+
9801011
<p>
9811012
For each element with a <span>before-change style</span> and
9821013
an <span>after-change style</span>,
@@ -1676,6 +1707,7 @@ <h2 id="changes">Changes since Working Draft of 12 February 2013</h2>
16761707
<ul>
16771708
<li>Define the <span>before-change style</span> and <span>after-change style</span> used for the style comparison, using the new concept of a <span>style change event</span>.
16781709
<li>Define that a CSS transition for a property does not affect computed style when a CSS Animation for the same property is running.
1710+
<li>Add a note pointing out that the above definitions imply that transitions can start simultaneously, from the same change, on ancestors and descendants.
16791711
</ul>
16801712
</ul>
16811713

0 commit comments

Comments
 (0)