Skip to content

Commit 0af9d50

Browse files
dbarondbaron
committed
[css-transitions] Describe what the before-style and after-style are when considering whether to start a transition.
This implements part A (and the normative part 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 fb9d38f commit 0af9d50

2 files changed

Lines changed: 173 additions & 27 deletions

File tree

‎css-transitions/Overview.html‎

Lines changed: 96 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
rel=dcterms.rights>
1111
<meta content="CSS Transitions" name=dcterms.title>
1212
<meta content=text name=dcterms.type>
13-
<meta content=2013-09-06 name=dcterms.date>
13+
<meta content=2013-09-10 name=dcterms.date>
1414
<meta content="L. David Baron" name=dcterms.creator>
1515
<meta content=W3C name=dcterms.publisher>
1616
<meta content="http://dev.w3.org/csswg/css3-transitions/"
@@ -40,7 +40,7 @@
4040

4141
<h1>CSS Transitions</h1>
4242

43-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 September
43+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 September
4444
2013</h2>
4545

4646
<dl>
@@ -935,11 +935,60 @@ <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
935935
class=css>blue</code>’ takes 1 second.
936936
</div>
937937

938-
<p> When the computed value of a property changes, implementations must
939-
start transitions based on the relevant item (see <a
940-
href="#transition-property">the definition of ‘<code
941-
class=property>transition-property</code>’</a>) in the computed value of
942-
‘<a href="#transition-property"><code
938+
<p> Various things can cause the computed style of an element to change, or
939+
for an element to start or stop having computed style. (For the purposes
940+
of this specification, an element has computed style when it is in the
941+
document tree, and does not have computed style when it is not in the
942+
document tree.) These include insertion and removal of elements from the
943+
document tree (which both changes whether those elements have computed
944+
styles and can change the styles of other elements through selector
945+
matching), changes to the document tree that cause changes to which
946+
selectors match elements, changes to style sheets or style attributes, and
947+
other things. This specification does not define when computed styles are
948+
updated. However, when an implementation updates the computed style for an
949+
element to reflect one of these changes, it must update the computed style
950+
for all elements to reflect all of these changes at the same time (or at
951+
least it must be undetectable that it was done at a different time). This
952+
processing of a set of simultaneous style changes is called a <dfn
953+
id=style-change-event>style change event</dfn>. (Implementations typically
954+
have a <a href="#style-change-event">style change event</a> to correspond
955+
with their desired screen refresh rate, and when up-to-date computed style
956+
is needed for a script API that depends on it.)
957+
958+
<p> Since this specification does not define when a <a
959+
href="#style-change-event">style change event</a> occurs, and thus what
960+
changes to computed values are considered simultaneous, authors should be
961+
aware that changing any of the transition properties a small amount of
962+
time after making a change that might transition can result in behavior
963+
that varies between implementations, since the changes might be considered
964+
simultaneous in some implementations but not others.
965+
966+
<p> When a <a href="#style-change-event">style change event</a> occurs,
967+
implementations must start transitions based on the computed styles that
968+
changed in that event. If an element does not have a computed style either
969+
before or after the style change event, then transitions are not started
970+
for that element in that style change event. Otherwise, define the
971+
<span>before-change style</span> as the computed style for the element as
972+
of the previous <a href="#style-change-event">style change event</a>,
973+
except with any styles derived from declarative animations such as CSS
974+
Transitions, CSS Animations (<a href="#CSS3-ANIMATIONS"
975+
rel=biblioentry>[CSS3-ANIMATIONS]<!--{{CSS3-ANIMATIONS}}--></a>), and SMIL
976+
Animations (<a href="#SMIL-ANIMATION"
977+
rel=biblioentry>[SMIL-ANIMATION]<!--{{SMIL-ANIMATION}}--></a>, <a
978+
href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>) updated to the
979+
current time. Likewise, define the <span>after-change style</span> as the
980+
computed style for the element based on the information known at the start
981+
of that <a href="#style-change-event">style change event</a>, in other
982+
words, excluding any changes resulting from CSS Transitions that start
983+
during that <a href="#style-change-event">style change event</a>.
984+
985+
<p> For each element with a <span>before-change style</span> and an
986+
<span>after-change style</span>, and each property (other than shorthands)
987+
for which the <span>before-change style</span> is different from the
988+
<span>after-change style</span>, implementations must start transitions
989+
based on the relevant item (see <a href="#transition-property">the
990+
definition of ‘<code class=property>transition-property</code>’</a>)
991+
in the computed value of ‘<a href="#transition-property"><code
943992
class=property>transition-property</code></a>’. Corresponding to this
944993
item there are computed values of ‘<a href="#transition-duration"><code
945994
class=property>transition-duration</code></a>’ and ‘<a
@@ -960,13 +1009,6 @@ <h2 id=starting><span class=secno>3. </span> Starting of transitions</h2>
9601009
class=property>transition-timing-function</code></a>’; in other cases
9611010
transitions do not occur.
9621011

963-
<p> Since this specification does not define when computed values change,
964-
and thus what changes to computed values are considered simultaneous,
965-
authors should be aware that changing any of the transition properties a
966-
small amount of time after making a change that might transition can
967-
result in behavior that varies between implementations, since the changes
968-
might be considered simultaneous in some implementations but not others.
969-
9701012
<p> Once the transition of a property has started, it must continue running
9711013
based on the original timing function, duration, and delay, even if the
9721014
‘<a href="#transition-timing-function"><code
@@ -1645,6 +1687,14 @@ <h2 id=changes><span class=secno>8. </span>Changes since Working Draft of
16451687

16461688
<li>Define initial values of event properties, using initializers in <a
16471689
href="#TransitionEventInit">TransitionEventInit</a>.
1690+
1691+
<li>Define the model for starting of transitions and their interaction
1692+
with other animations more precisely:
1693+
<ul>
1694+
<li>Define the <span>before-change style</span> and <span>after-change
1695+
style</span> used for the style comparison, using the new concept of a
1696+
<a href="#style-change-event">style change event</a>.
1697+
</ul>
16481698
</ul>
16491699

16501700
<p>For more details on these changes, see the version control change logs,
@@ -1696,6 +1746,16 @@ <h3 class=no-num id=other-references>Other references</h3>
16961746
</dd>
16971747
<!---->
16981748

1749+
<dt id=CSS3-ANIMATIONS>[CSS3-ANIMATIONS]
1750+
1751+
<dd>Dean Jackson; et al. <a
1752+
href="http://www.w3.org/TR/2013/WD-css3-animations-20130219/"><cite>CSS
1753+
Animations.</cite></a> 19 February 2013. W3C Working Draft. (Work in
1754+
progress.) URL: <a
1755+
href="http://www.w3.org/TR/2013/WD-css3-animations-20130219/">http://www.w3.org/TR/2013/WD-css3-animations-20130219/</a>
1756+
</dd>
1757+
<!---->
1758+
16991759
<dt id=CSS3-IMAGES>[CSS3-IMAGES]
17001760

17011761
<dd>Elika J. Etemad; Tab Atkins Jr. <a
@@ -1715,6 +1775,25 @@ <h3 class=no-num id=other-references>Other references</h3>
17151775
</dd>
17161776
<!---->
17171777

1778+
<dt id=SMIL-ANIMATION>[SMIL-ANIMATION]
1779+
1780+
<dd>Patrick Schmitz; Aaron Cohen. <a
1781+
href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/"><cite>SMIL
1782+
Animation.</cite></a> 4 September 2001. W3C Recommendation. URL: <a
1783+
href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/">http://www.w3.org/TR/2001/REC-smil-animation-20010904/</a>
1784+
</dd>
1785+
<!---->
1786+
1787+
<dt id=SVG11>[SVG11]
1788+
1789+
<dd>Erik Dahlström; et al. <a
1790+
href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
1791+
Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
1792+
W3C Recommendation. URL: <a
1793+
href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
1794+
</dd>
1795+
<!---->
1796+
17181797
<dt id=WCAG20>[WCAG20]
17191798

17201799
<dd>Ben Caldwell; et al. <a
@@ -1848,6 +1927,9 @@ <h2 class=no-num id=index>Index</h2>
18481927
href="#single-transition-timing-function"
18491928
title="section 2.3."><strong>2.3.</strong></a>
18501929

1930+
<li>style change event, <a href="#style-change-event"
1931+
title="section 3."><strong>3.</strong></a>
1932+
18511933
<li>transition, <a href="#transition"
18521934
title="section 2.5."><strong>2.5.</strong></a>
18531935

‎css-transitions/Overview.src.html‎

Lines changed: 77 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -912,8 +912,79 @@ <h2 id="starting">
912912
</div>
913913

914914
<p>
915-
When the computed value of a property changes, implementations
916-
must start transitions based on the relevant item (see <a
915+
Various things can cause the computed style of an element to change,
916+
or for an element to start or stop having computed style.
917+
(For the purposes of this specification,
918+
an element has computed style when it is in the document tree,
919+
and does not have computed style when it is not in the document tree.)
920+
These include
921+
insertion and removal of elements from the document tree
922+
(which both changes whether those elements have computed styles and
923+
can change the styles of other elements through selector matching),
924+
changes to the document tree that cause
925+
changes to which selectors match elements,
926+
changes to style sheets or style attributes,
927+
and other things.
928+
This specification does not define when computed styles are updated.
929+
However,
930+
when an implementation updates the computed style for an element
931+
to reflect one of these changes,
932+
it must update the computed style for all elements to reflect all
933+
of these changes at the same time
934+
(or at least it must be undetectable that it was done at a
935+
different time).
936+
This processing of a set of simultaneous style changes is called a
937+
<dfn>style change event</dfn>.
938+
(Implementations typically have a <span>style change event</span> to
939+
correspond with their desired screen refresh rate,
940+
and when up-to-date computed style is needed
941+
for a script API that depends on it.)
942+
</p>
943+
944+
<p>
945+
Since this specification does not define
946+
when a <span>style change event</span> occurs,
947+
and thus what changes to computed values are considered simultaneous,
948+
authors should be aware that changing any of the transition
949+
properties a small amount of time after making a change that
950+
might transition can result in behavior that varies between
951+
implementations, since the changes might be considered
952+
simultaneous in some implementations but not others.
953+
</p>
954+
955+
<p>
956+
When a <span>style change event</span> occurs,
957+
implementations must start transitions based on
958+
the computed styles that changed in that event.
959+
If an element does not have a computed style
960+
either before or after the style change event,
961+
then transitions are not started for that element
962+
in that style change event.
963+
Otherwise,
964+
define the <span>before-change style</span> as
965+
the computed style for the element as of
966+
the previous <span>style change event</span>,
967+
except with any styles derived from declarative
968+
animations such as CSS Transitions, CSS Animations
969+
([[CSS3-ANIMATIONS]]),
970+
and SMIL Animations ([[SMIL-ANIMATION]], [[SVG11]])
971+
updated to the current time.
972+
Likewise, define the <span>after-change style</span> as
973+
the computed style for the element based on the information
974+
known at the start of that <span>style change event</span>,
975+
in other words,
976+
excluding any changes resulting from CSS Transitions
977+
that start during that <span>style change event</span>.
978+
</p>
979+
980+
<p>
981+
For each element with a <span>before-change style</span> and
982+
an <span>after-change style</span>,
983+
and each property (other than shorthands) for which
984+
the <span>before-change style</span> is different from
985+
the <span>after-change style</span>,
986+
implementations must
987+
start transitions based on the relevant item (see <a
917988
href="#transition-property">the definition of
918989
'transition-property'</a>) in the computed value of
919990
'transition-property'.
@@ -929,17 +1000,6 @@ <h2 id="starting">
9291000
in other cases transitions do not occur.
9301001
</p>
9311002

932-
<p>
933-
Since this specification does not define
934-
when computed values change, and thus what changes to
935-
computed values are considered simultaneous,
936-
authors should be aware that changing any of the transition
937-
properties a small amount of time after making a change that
938-
might transition can result in behavior that varies between
939-
implementations, since the changes might be considered
940-
simultaneous in some implementations but not others.
941-
</p>
942-
9431003
<p>
9441004
Once the transition of a property has started, it must continue
9451005
running based on the original timing function, duration, and
@@ -1558,6 +1618,10 @@ <h2 id="changes">Changes since Working Draft of 12 February 2013</h2>
15581618
<li>Make the behavior of simultaneous changes of 'transition-*' properties and transitionable properties even clearer.
15591619
<li>Computed Value line for shorthands should say "see individual properties".
15601620
<li>Define initial values of event properties, using initializers in <span>TransitionEventInit</span>.
1621+
<li>Define the model for starting of transitions and their interaction with other animations more precisely:
1622+
<ul>
1623+
<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>.
1624+
</ul>
15611625
</ul>
15621626

15631627
<p>For more details on these changes, see the version control change logs, which are split in two parts because of a file renaming: <a href="https://dvcs.w3.org/hg/csswg/log/tip/css-transitions/Overview.src.html">change log since 2013 March 28</a>, <a href="https://dvcs.w3.org/hg/csswg/log/tip/css3-transitions/Overview.src.html">change log before 2013 March 28</a>.

0 commit comments

Comments
 (0)