@@ -318,85 +318,6 @@ the {{TransitionEvent}}.
318
318
319
319
</div>
320
320
321
-
322
- ## Types of <code> TransitionEvent</code> ## {#transition-event-types}
323
-
324
- <p> The <em> additional</em> types of transition events that can occur are:</p>
325
-
326
- <dl dfn-type=event dfn-for=transitionevent>
327
- <dt> <dfn>transitionrun</dfn>
328
- <dd>
329
- The <a idl>transitionrun</a> event occurs when a transition is created (i.e., when it is added to the set of <a>running transitions</a> ).
330
- The {{AnimationEvent/elapsedTime}} in this case is equal to the value
331
- defined for the <a idl>transitionstart</a> event.
332
-
333
- Issue: Is there some more useful value we could provide here for the
334
- <code> elapsedTime</code> ?
335
-
336
- <ul>
337
- <li> Bubbles: Yes</li>
338
- <li> Cancelable: No</li>
339
- <li> Context Info: propertyName, elapsedTime, pseudoElement</li>
340
- </ul>
341
- <dt> <dfn>transitionstart</dfn>
342
- <dd>
343
- The <a idl>transitionstart</a> event occurs when a transition's delay
344
- phase ends.
345
- The {{AnimationEvent/elapsedTime}} in this case is the result of
346
- calculating
347
- <code> max(min(-<a>start delay</a> , <a>active duration</a> ), 0)
348
- / 1000</code>
349
- where the <a>start delay</a> and <a>active duration</a> values refer
350
- to the values defined for the transition's <a>target effect</a> .
351
-
352
- Note: This calculation is roughly equivalent to saying,
353
- “The <code> elapsedTime</code> is zero unless there is
354
- a negative 'transition-delay' , in which case the <code> elapsedTime</code>
355
- is the absolute value of the 'transition-delay' .”
356
- However, it produces more useful results in some edge cases such as
357
- when the there is a negative delay greater in magnitude than the
358
- total duration of the animation.
359
-
360
- <ul>
361
- <li> Bubbles: Yes</li>
362
- <li> Cancelable: No</li>
363
- <li> Context Info: propertyName, elapsedTime, pseudoElement</li>
364
- </ul>
365
- <dt> <dfn>transitioncancel</dfn>
366
- <dd>
367
- The <a idl>transitioncancel</a> event occurs when a transition is <a lt="cancel">cancelled</a> .
368
- The {{AnimationEvent/elapsedTime}} in this case is zero.
369
-
370
- Issue: Is there some more useful value we could provide here for the
371
- <code> elapsedTime</code> ?
372
- (We could, for example, return the current time at the moment the
373
- transition was cancelled so that the author can tell if the transition
374
- had just started or was close to finishing and perhaps behave differently
375
- in each case.
376
- Doing that, however, would require implementations to store
377
- additional state for each transition which would be unfortunate if
378
- this is not a common use case.)
379
-
380
- <ul>
381
- <li> Bubbles: Yes</li>
382
- <li> Cancelable: No</li>
383
- <li> Context Info: propertyName, elapsedTime, pseudoElement</li>
384
- </ul>
385
- </dl>
386
-
387
- <div class="issue">
388
-
389
- We should define the dispatch of events more generally in light of
390
- possible modifications to a transition's playback using the Web Animations API
391
- like we do for CSS Animations (see the section on
392
- [[css-animations-2#event-dispatch|event dispatch]] ).
393
-
394
- As part of this, we should clarify the calculation of the
395
- {{AnimationEvent/elapsedTime}} member for <a idl>transitionend</a> events to
396
- use the same <a>interval end</a> value defined for CSS Animations.
397
-
398
- </div>
399
-
400
321
# DOM Interfaces # {#interface-dom}
401
322
402
323
## The CSSTransition interface ## {#the-CSSTransition-interface}
0 commit comments