8000 csswg-drafts/css3-transitions/Overview.src.html at 19ecee95786d38bbf071eaab5cbedac30437f3e9 · xfq/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
1403 lines (1340 loc) · 49.5 KB

Overview.src.html

File metadata and controls

1403 lines (1340 loc) · 49.5 KB
<p style="display:none">
Example(s):
</p>
<pre>li { transition: background-color linear 1s; background: blue; }
li:hover { transition-duration: 2s; background-color: green; }</pre>
<p>
When a list item with these style rules enters the :hover
state, the computed 'transition-duration' at the time that
'background-color' would have its new value ('green') is '2s',
so the transition from 'blue' to 'green' takes 2 seconds.
However, when the list item leaves the :hover state, the
transition from 'green' to 'blue' takes 1 second.
</p>
</div>
<p>
Since this specification does not define
when computed values change, and thus what changes to
computed values are considered simultaneous,
authors should be aware that changing any of the transition
properties a small amount of time after making a change that
might transition can result in behavior that varies between
implementations, since the changes might be considered 67FD
simultaneous in some implementations but not others.
</p>
<p class="note">Say something about simulaneity</p>
<p>
Once the transition of a property has started, it must continue
running based on the original timing function, duration, and
delay, even if the 'transition-timing-function',
'transition-duration', or 'transition-delay' property changes
before the transition is complete. However, if the
'transition-property' property changes such that the transition
would not have started, the transition must stop (and the
property must immediately change to its final value).
</p>
<p>
Implementations must not start a transition when the computed
value of a property changes as a result of declarative animation
(as opposed to scripted animation).
</p>
<p>
Implementations also must not start a transition when the
computed value changes because it is inherited (directly or
indirectly) from another element that is transitioning the same
property.
</p>
<h2 id="reversing">
Automatically reversing transitions
</h2>
<p>
A common type of transition effect is when a running transition is
interrupted and the property is reset to its original value. An
example is a hover effect on an element, where the pointer enters and
exits the element before the effect has completed. If the outgoing and
incoming transitions are executed using their specified durations and
timing functions, the resulting effect can be distractingly
asymmetric. Instead, the expected behavior is that the new transition
should be the reverse of what has already executed.
</p>
<p>
If a running transition with duration T, executing so far for duration TE,
from state A, to state B, is interrupted by
a property change that would start a new transition back to state A, and
all the transition attributes are the same (duration, delay and timing function),
then the new transition must reverse the effect. The new transition must:
</p>
<ol>
<li>
Use the B and A states as its "from" and "to" states respectively. It
does not use the current value as its from state, due to the rules below.
</li>
<li>
Execute with the same duration T, but starting as if the transition had
already begun, without any transition delay, at the moment which would
cause the new transition to finish in TE from the moment of interruption. In other
words, the new transition will execute as if it started T-TE in the past.
</li>
<li>
Use a timing function that is the portion of the curve traversed up
to the moment of interruption, followed in the opposite direction (towards
the starting point). This will make the transition appear as if it
is playing backwards.
</li>
<li>
Ignore any transition delay.
</li>
</ol>
<p>
For example, suppose there is a transition with a duration of two
seconds. If this transition is interrupted after 0.5 seconds and the
property value assigned to the original value, then the new transition
effect will be the reverse of the original, as if it had begun
1.5 seconds in the past.
</p>
<p>
Note that by using the defined from and to states for the reversing
transition, it is also possible that it may reverse again, if
interrupted; for example, if the transition reversing to state A was
again interrupted by a property change to state B.
</p>
<p class="issue">Issue:
This introduces the concept of reversing a timing function,
which the spec has otherwise resisted doing, and also introduces
a discontinuity between transitions that have
almost completed (which get automatically reversed and thus have
their timing function reversed) and transitions that have fully
completed (where the reversal doesn't lead to the timing
function being reversed). An alternative proposal that avoids
this is to follow the normal timing function algorithm, except
multiply the duration (and also shorten any negative delay) by
the (output) value of the transition timing function of the
incomplete transition at the time it was interrupted, and, to
account for multiple reverses in sequence, to divide by the
shortening applied to the transition being interrupted. For
more details see this thread:
<a href="http://lists.w3.org/Archives/Public/www-style/2009Nov/thread.html#msg302">November 2009 part</a>,
<a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/thread.html#msg319">December 2009 part</a>,
<a href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January 2010 part</a>.
</p>
<h2>
Transition Events
</h2>
<p>
The completion of a CSS Transition generates a corresponding <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event</a>.
An event is fired for each property that undergoes a transition.
This allows a content developer to perform actions that synchronize
with the completion of a transition.
</p>
<p>
Each event provides the name of the property the transition is
associated with as well as the duration of the transition.
</p>
<dl>
<dt>
<b>Interface <i><a id="Events-TransitionEvent" name='Events-TransitionEvent'>TransitionEvent</a></i></b>
</dt>
<dd>
<p>
The <code>TransitionEvent</code> interface provides specific contextual information associated with transitions.
</p>
<dl>
<dt>
<b>IDL Definition</b>
</dt>
<dd>
<div class='idl-code'>
<pre>
interface TransitionEvent : Event {
readonly attribute DOMString propertyName;
readonly attribute float elapsedTime;
void initTransitionEvent(in DOMString typeArg,
in boolean canBubbleArg,
in boolean cancelableArg,
in DOMString propertyNameArg,
in float elapsedTimeArg);
};
</pre>
</div>
</dd>
<dt>
<b>Attributes</b>
</dt>
<dd>
<dl>
<dt>
<code class='attribute-name'><a id="Events-TransitionEvent-propertyName" name='Events-TransitionEvent-propertyName'>propertyName</a></code> of type <code>DOMString</code>, readonly
</dt>
<dd>
The name of the CSS property associated with the transition.
</dd>
</dl>
<dl>
<dt>
<code class='attribute-name'><a id="Events-TransitionEvent-elapsedTime" name='Events-TransitionEvent-elapsedTime'>elapsedTime</a></code> of type <code>float</code>, readonly
</dt>
<dd>
The amount of time the transition has been running, in seconds, when this event fired. Note that this value is not affected by the value of <code class="property">transition-delay</code>.
</dd>
</dl>
</dd>
<dt>
<b>Methods</b>
</dt>
<dd>
<dl>
<dt>
<code class='method-name'><a id="Events-TransitionEvent-initTransitionEvent" name='Events-TransitionEvent-initTransitionEvent'>initTransitionEvent</a></code>
</dt>
<dd>
<div class='method'>
The <code>initTransitionEvent</code> method is used to
initialize the value of a <code>TransitionEvent</code>
created through the <a
href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent'><code>DocumentEvent</code></a>
interface. This method may only be called before the
<code>TransitionEvent</code> has been dispatched via the
<code>dispatchEvent</code> method, though it may be called
multiple times during that phase if necessary. If called
multiple times, the final invocation takes precedence.
<div class='parameters'>
<b>Parameters</b>
<div class='paramtable'>
<dl>
<dt>
<code class='parameter-name'>typeArg</code> of type <code>DOMString</code>
</dt>
<dd>
Specifies the event type.<br>
</dd>
<dt>
<code class='parameter-name'>canBubbleArg</code> of type <code>boolean</code>
</dt>
<dd>
Specifies whether or not the event can bubble.<br>
</dd>
<dt>
<code class='parameter-name'>cancelableArg</code> of type <code>boolean</code>
</dt>
<dd>
Specifies whether or not the event's default action can be prevented. Since a TransitionEvent
is purely for notification, there is no default action.<br>
</dd>
<dt>
<code class='parameter-name'>propertyNameArg</code> of type <code>DOMString</code>
</dt>
<dd>
Specifies the name of the property associated with the <a href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event'><code>Event</code></a>
</dd>
<dt>
<code class='parameter-name'>elapsedTimeArg</code> of type <code>float</code>
</dt>
<dd>
Specifies the amount of time, in seconds, the transition has been running at the time of initialization.
</dd>
</dl>
</div>
</div><!-- parameters -->
<div>
<b>No Return Value</b>
</div>
<div>
<b>No Exceptions</b>
View remainder of file in raw view