Skip to content

Commit c20c34f

Browse files
birtlesbirtles
committed
[css-transitions][css-transitions-2] Move new transition events to transitions level 1
https://logs.csswg.org/irc.w3.org/css/2016-09-19/#e722575
1 parent e177371 commit c20c34f

2 files changed

Lines changed: 328 additions & 43 deletions

File tree

‎css-transitions-2/Overview.bs‎

Lines changed: 192 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,23 @@
11
<h1>CSS Transitions Level 2</h1>
22

3+
<style type="text/css">
4+
table.event-state-transitions {
5+
width: 100%;
6+
border-spacing: 0px;
7+
border-collapse: collapse;
8+
}
9+
table.event-state-transitions th:first-child {
10+
width: 30%;
11+
}
12+
table.event-state-transitions th {
13+
text-align: center;
14+
}
15+
table.event-state-transitions td {
16+
padding: 0.2em 1em;
17+
border: 1px solid black;
18+
}
19+
</style>
20+
321
<pre class='metadata'>
422
Status: ED
523
Work Status: Exploring
@@ -17,14 +35,21 @@ urlPrefix: https://w3c.github.io/web-animations/; type: interface; spec: web-ani
1735
text: Animation
1836
urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animations
1937
text: active duration
38+
text: active time
2039
text: animation
2140
text: animation class
41+
text: animation playback rate
42+
text: current iteration
43+
text: fill mode
2244
text: global animation list
2345
text: idle play state
46+
text: iteration duration
47+
text: iteration start
48+
text: pending play state
49+
text: sampling
2450
text: start delay
2551
text: target effect
26-
urlPrefix: https://drafts.csswg.org/css-animations-2/; type: dfn; spec: css-animations-2
27-
text: interval end
52+
text: target effect end
2853
</pre>
2954
<pre class=link-defaults>
3055
spec:css-transitions-1; type:value; text:all
@@ -130,6 +155,170 @@ to the <a>global animation list</a> at the moment they are constructed.
130155

131156
# Transition Events # {#transition-events}
132157

158+
## Event dispatch ## {#event-dispatch}
159+
160+
Note, this is a more general description of event dispatch than that of CSS
161+
Transitions Level 1 [[CSS3-TRANSITIONS]] since it must account for the
162+
possibility of animations being seeked or reversed using the Web Animations API
163+
[[WEB-ANIMATIONS]]. Furthermore, it is possible using the Web Animations API
164+
to substitute the transition effect with an entirely different effect with
165+
properties not normally used with transitions (e.g. an effect that repeats
166+
multiple times) and hence this section provides a generic definition that
167+
accounts for the full complexity of the Web Animations model.
168+
169+
To avoid firing redundant events, the set of events to dispatch is based
170+
on comparing the <a lt="transition phase">phase</a> of the transition in the
171+
previous <a lt="sampling">sample</a> (animation frame) to its current state.
172+
173+
The <dfn>transition phase</dfn> of a transition is initially &lsquo;idle&rsquo;
174+
and is updated on each sample according to the first matching condition from
175+
below:
176+
177+
<dl class=switch>
178+
<dt>If the transition has no <a>target effect</a>,
179+
<dd>The transition phase is &lsquo;idle&rsquo;.
180+
<dt>If the transition is <a lt="pending play state">pending</a> and its
181+
phase was previously &lsquo;idle&rsquo; or &lsquo;pending&rsquo;,
182+
<dd>The transition phase is &lsquo;pending&rsquo;.
183+
<dt>Otherwise,
184+
<dd>The transition phase is the
185+
[[web-animations#animation-effect-phases-and-states|phase]] of its
186+
<a>target effect</a>.
187+
</dl>
188+
189+
For calculating the {{TransitionEvent/elapsedTime}} of each event, the following
190+
definitions are used:
191+
192+
* <dfn>interval start</dfn> =
193+
<code>max(min(-<a>start delay</a>, <a>active duration</a>), 0)</code>
194+
* <dfn>interval end</dfn> =
195+
<code>max(min(<a>target effect end</a> - <a>start delay</a>,
196+
<a>active duration</a>), 0)</code>
197+
198+
In the above formulae, references to the <a>start delay</a>, <a>active
199+
duration</a>, <a>current iteration</a>, <a>iteration start</a>, and
200+
<a>iteration duration</a> of a transition should be understood to refer
201+
to the corresponding properties of the transition's <a>target effect</a>.
202+
203+
Each time an animation is <a lt="sampling">sampled</a>, the events to
204+
dispatch are determined by comparing the <a>transition phase</a> before and
205+
after the sample as follows:
206+
207+
<table class="event-state-transitions">
208+
<thead>
209+
<tr>
210+
<th>Change</th>
211+
<th>Events dispatched</th>
212+
<th><dfn>Elapsed time</dfn> (ms)</th>
213+
</tr>
214+
</thead>
215+
<tbody>
216+
<tr>
217+
<td>idle &rarr; <em>not</em> idle <a
218+
href="#idle-to-active-note">&#x66d;</a></td>
219+
<td><a idl>transitionrun</a></td>
220+
<td>If the <a>animation playback rate</a> is &ge; 0,
221+
use the <a>interval start</a>, otherwise use the
222+
<a>interval end</a>.
223+
</td>
224+
</tr>
225+
<tr>
226+
<td>idle <em>or</em> pending &rarr; active <a
227+
href="#idle-to-active-note">&#x66d;</a></td>
228+
<td><a idl>transitionstart</a></td>
229+
<td>If the <a>animation playback rate</a> is &ge; 0,
230+
use the <a>interval start</a>, otherwise use the
231+
<a>interval end</a>.
232+
</td>
233+
</tr>
234+
<tr>
235+
<td>before &rarr; active</td>
236+
<td><a idl>transitionstart</a></td>
237+
<td><a>interval start</a></td>
238+
</tr>
239+
<tr>
240+
<td rowspan="2">before &rarr; after <a
241+
href="#multiple-events-note">&dagger;</a></td>
242+
<td><a idl>transitionstart</a></td>
243+
<td><a>interval start</a></td>
244+
</tr>
245+
<tr>
246+
<td><a idl>transitionend</a></td>
247+
<td><a>interval end</a></td>
248+
</tr>
249+
<tr>
250+
<td>active &rarr; after</td>
251+
<td><a idl>transitionend</a></td>
252+
<td><a>interval end</a></td>
253+
</tr>
254+
<tr>
255+
<td>active &rarr; before</td>
256+
<td><a idl>transitionend</a></td>
257+
<td><a>interval start</a></td>
258+
</tr>
259+
<tr>
260+
<td>after &rarr; active</td>
261+
<td><a idl>transitionstart</a></td>
262+
<td><a>interval end</a></td>
263+
</tr>
264+
<tr>
265+
<td rowspan="2">after &rarr; before <a
266+
href="#multiple-events-note">&dagger;</a></td>
267+
<td><a idl>transitionstart</a></td>
268+
<td><a>interval end</a></td>
269+
</tr>
270+
<tr>
271+
<td><a idl>transitionend</a></td>
272+
<td><a>interval start</a></td>
273+
</tr>
274+
<tr>
275+
<td><em>not</em> idle <em>or</em> after &rarr; idle</td>
276+
<td><a idl>transitioncancel</a></td>
277+
<td>The <a>active time</a> of the animation at the moment it was cancelled
278+
calculated using a <a>fill mode</a> of both.</td>
279+
</tr>
280+
</tbody>
281+
</table>
282+
283+
<p id="idle-to-active-note">&#x66d; If the transition phase changes from
284+
&lsquo;idle&rsquo; to &lsquo;active&rsquo; then <em>both</em> {{transitionrun}}
285+
run and {{transitionstart}} events are queued, in that order.</p>
286+
287+
<p id="multiple-events-note">&dagger; Where multiple events are listed for
288+
a state change, all events are dispatched in the order listed and in immediate
289+
succession.</p>
290+
291+
Since the <a>elapsed time</a> defined in the table and procedure above is
292+
expressed in milliseconds, it must be divided by 1,000 to produce a value in
293+
seconds before being assigned to the {{TransitionEvent/elapsedTime}} member of
294+
the {{TransitionEvent}}.
295+
296+
<div class="note">
297+
298+
The above state transition chart ensures that, with the exception of
299+
transitions that are paused or have an infinite running time, the following
300+
invariants hold:
301+
302+
* For every {{transitionrun}} event there will be a exactly one
303+
{{transitionend}} <em>or</em> {{transitioncancel}} and never both.
304+
* For every {{transitionstart}} event there will be a exactly one
305+
{{transitionend}} <em>or</em> {{transitioncancel}} and never both.
306+
* Every {{transitionend}} event is preceded by a corresponding
307+
{{transitionstart}} event.
308+
309+
The typical sequences of events, then, are as follows:
310+
311+
* Regular playback: {{transitionrun}}, {{transitionstart}}, {{transitionend}}.
312+
* Interrupted playback: {{transitionrun}}, {{transitionstart}},
313+
{{transitioncancel}}.
314+
* Interrupted playback during delay or pending phase: {{transitionrun}},
315+
{{transitioncancel}}.
316+
* Reversed playback after completion: {{transitionrun}}, {{transitionstart}},
317+
{{transitionend}}, {{transitionstart}}, {{transitionend}}.
318+
319+
</div>
320+
321+
133322
## Types of <code>TransitionEvent</code> ## {#transition-event-types}
134323

135324
<p>The <em>additional</em> types of transition events that can occur are:</p>
@@ -162,7 +351,7 @@ to the <a>global animation list</a> at the moment they are constructed.
162351

163352
Note: This calculation is roughly equivalent to saying,
164353
&ldquo;The <code>elapsedTime</code> is zero unless there is
165-
a negative 'transition-delay', in which cse the <code>elapsedTime</code>
354+
a negative 'transition-delay', in which case the <code>elapsedTime</code>
166355
is the absolute value of the 'transition-delay'.&rdquo;
167356
However, it produces more useful results in some edge cases such as
168357
when the there is a negative delay greater in magnitude than the

0 commit comments

Comments
 (0)