8000 [css-transitions-2] Add animation composite order section · w3c/csswg-drafts@e3cb766 · GitHub
Skip to content

Commit e3cb766

Browse files
birtlesbirtles
committed
[css-transitions-2] Add animation composite order section
1 parent cc9d852 commit e3cb766

2 files changed

Lines changed: 236 additions & 21 deletions

File tree

‎css-transitions-2/Overview.bs‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,18 @@ Issue Tracking: Bugzilla bugs for all levels https://www.w3.org/Bugs/Public/bugl
1212
Abstract: CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.
1313
Ignored Terms: translate, rotate, scale
1414
</pre>
15+
<pre class="anchors">
16+
urlPrefix: https://w3c.github.io/web-animations/; type: interface; spec: web-animations
17+
text: Animation
18+
urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animations
19+
text: animation
20+
text: animation type
21+
text: global animation list
22+
text: idle play state
23+
</pre>
24+
<pre class=link-defaults>
25+
spec:css-transitions-1; type:value; text:all
26+
</pre>
1527

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

@@ -22,6 +34,99 @@ Ignored Terms: translate, rotate, scale
2234

2335
<h2 id="transition-events"><span id="transition-events-">Transition Events</span></h2>
2436

37+
# Starting of transitions # {#starting}
38+
39+
Associated with each top-level browsing context is a <dfn>current transition
40+
generation</dfn> that is incremented on each <a>style change event</a>.
41+
42+
Each time a new transition is generated, the current value of the (already
43+
incremented) <a>current transition generation</a> is stored as the
44+
transition's <dfn>transition generation</dfn>.
45+
46+
## The transition property name ## {#transition-property-name}
47+
48+
Although the 'transition-property' may specify shorthand properties and the
49+
''all'' keyword, individual transitions are generated for each longhand
50+
sub-property that is animatable. The <dfn>expanded transition property
51+
name</dfn> of a transition is the name of the longhand sub-property for which
52+
the transition was generated (e.g. 'border-left-width').
53+
54+
## Owning element ## {#owning-element-section}
55+
56+
The <dfn>owning element</dfn> of a transition refers to the element or
57+
pseudo-element to which the 'transition-property' property was applied that
58+
generated the animation.
59+
60+
If a transition was generated directly by script then it has no <a>owning
61+
element</a>.
62+
63+
If a transition generated using the markup defined in this specification is
64+
later disassociated from that markup because it is cancelled or replaced by
65+
a newer transition, the animation is disassociated from its <a>owning
66+
element</a> (that is, it has no <a>owning element</a> from that point
67+
forwards).
68+
69+
Issue: Define the above more precisely once we rewrite firing of transitions
70+
in terms of Web Animations concepts (specifically when we spell out when we
71+
cancel an animation).
72+
73+
## Animation composite order ## {#animation-composite-order}
74+
75+
<a spec='web-animations'>Animations</a> generated from the markup defined in
76+
this specification have an <a>animation type</a> of
77+
&lsquo;CSS Transition&rsquo;.
78+
79+
CSS Transitions have an <em>earlier</em> composite order that CSS Animations
80+
and animations without a specific <a>animation type</a>.
81+
82+
Within the set of CSS Transitions, two animations <var>A</var> and <var>B</var>
83+
are sorted in composite order (first to last) as follows:
84+
85+
1. If neither <var>A</var> nor <var>B</var> has an <a>owning element</a>,
86+
sort based on their relative position in the <a>global animation list</a>.
87+
88+
1. Otherwise, if only one of <var>A</var> or <var>B</var> has an <a>owning
89+
element</a>, let the animation <em>with</em> an <a>owning element</a> sort
90+
first.
91+
92+
1. Otherwise, if the <a>owning element</a> of <var>A</var> and <var>B</var>
93+
differs, sort <var>A</var> and <var>B</var> by <a>tree order</a>
94+
of their corresponding <a>owning elements</a>.
95+
With regard to pseudo-elements, the sort order is as follows:
96+
97+
* element
98+
* ::before
99+
* ::after
100+
* element children
101+
102+
1. Otherwise, if <var>A</var> and <var>B</var> have different <a>transition
103+
generation</a> values, sort by their corresponding
104+
<a>transition generation</a> in ascending order.
105+
106+
1. Otherwise, sort <var>A</var> and <var>B</var> in ascending order by the
107+
Unicode codepoints that make up the <a>expanded transition property
108+
name</a> of each transition (i.e. without attempting case conversion and
109+
such that &lsquo;-moz-column-width&rsquo; sorts before
110+
&lsquo;column-width&rsquo;).
111+
402E 112+
Transitions generated using the markup defined in this specification are
113+
<em>not</em> added to the <a>global animation list</a> when they are created.
114+
Instead, these animations are appended to the <a>global animation list</a> at
115+
the first moment when they transition out of the <a>idle play state</a> after
116+
being disassociated from their <a>owning element</a>.
117+
Transitions that have been disassociated from their <a>owning element</a>
118+
but are still <a lt="idle play state">idle</a> do not have a defined
119+
composite order.
120+
121+
Note, this behavior relies on the fact that disassociating a transition
122+
from its <a>owning element</a> always causes it to enter (or remain) in the
123+
<a>idle play state</a>.
124+
125+
<!--
126+
Transitions created using the {{CSSTransition()}} constructor are appended
127+
to the <a>global animation list</a> at the moment they are constructed.
128+
-->
129+
25130
<h3 id="transition-event-types">Types of <code>TransitionEvent</code></h3>
26131

27132
<p>The <em>additional</em> types of transition events that can occur are:</p>

0 commit comments

Comments
 (0)