css-transitions/Overview.src.html

changeset 9524
9eb0718d6baa
parent 9406
3d943f796fee
child 9528
a5b65249bdc9
     1.1 --- a/css-transitions/Overview.src.html	Mon Nov 11 17:37:09 2013 +0800
     1.2 +++ b/css-transitions/Overview.src.html	Mon Nov 11 17:53:08 2013 +0800
     1.3 @@ -979,6 +979,10 @@
     1.4  
     1.5        <p class="issue">
     1.6          This wording needs to handle already-running transitions better!
     1.7 +        Need to cancel a transition that hasn't moved yet when we're
     1.8 +        resetting to its start value!  Define cancelling as not
     1.9 +        firing transition events.  And point to other occurrence of
    1.10 +        cancelling in reversing section.
    1.11        </p>
    1.12  
    1.13        <div class="note">
    1.14 @@ -1043,6 +1047,18 @@
    1.15          the matching transition delay.
    1.16          The <dfn>end time</dfn> of this transition is defined as
    1.17          the <span>start time</span> plus the matching transition duration.
    1.18 +        The <dfn>start value</dfn> of this transition is defined as
    1.19 +        the value of the transitioning property
    1.20 +        in the <span>before-change style</span>,
    1.21 +        and the <dfn>end value</dfn> of this transition is defined as
    1.22 +        the value of the transitioning property
    1.23 +        in the <span>after-change style</span>.
    1.24 +        Except in the cases described
    1.25 +        in the <a href="#reversing">section on reversing of
    1.26 +        transitions</a>,
    1.27 +        the <dfn>reversing-adjusted start value</dfn> is the same as
    1.28 +        the <span>start value</span>,
    1.29 +        and the <dfn>reversing shortening factor</dfn> is 1.
    1.30        </p>
    1.31  
    1.32        <p>
    1.33 @@ -1069,6 +1085,108 @@
    1.34          property.
    1.35        </p>
    1.36  
    1.37 +      <h3 id="reversing">
    1.38 +        Automatically reversing interrupted transitions
    1.39 +      </h3>
    1.40 +      <p>
    1.41 +        Many common transitions effects involve transitions between two states,
    1.42 +        such as the transition that occurs when the mouse pointer moves
    1.43 +        over a user interface element, and then later moves out of that element.
    1.44 +        With these effects, it is common for a running transition
    1.45 +        to be interrupted before it completes,
    1.46 +        and the property reset to the starting value of that transition.
    1.47 +        An example is a hover effect on an element,
    1.48 +        where a transition starts when the pointer enters the element,
    1.49 +        and then the pointer exits the element before the effect has completed.
    1.50 +        If the outgoing and incoming transitions
    1.51 +        are executed using their specified durations and timing functions,
    1.52 +        the resulting effect can be distractingly asymmetric
    1.53 +        because the second transition
    1.54 +        takes the full specified time to move a shortened distance.
    1.55 +        Instead, the expected behavior is that the second transition is shorter.
    1.56 +      </p>
    1.57 +
    1.58 +      <p>
    1.59 +        To meet this expectation,
    1.60 +        when a transition is started for a property on an element
    1.61 +        (henceforth, the <dfn>new transition</dfn>)
    1.62 +        that has a currently-running transition whose
    1.63 +        <span>reversing-adjusted start value</span> is the same as the
    1.64 +        <span>end value</span> of the new transition
    1.65 +        (henceforth, the <dfn>old transition</dfn>), implementations
    1.66 +        must cancel the old transition <span class="issue">link to
    1.67 +        definition above</span> and adjust the new transition as follows
    1.68 +        (prior to following the rules for computing the <span>combined
    1.69 +        duration</span>, <span>start time</span>, and <span>end
    1.70 +        time</span>):
    1.71 +      </p>
    1.72 +
    1.73 +      <ol>
    1.74 +
    1.75 +        <li>
    1.76 +          The <span>reversing-adjusted start value</span> of the new
    1.77 +          transition is instead the the <span>end value</span> of the
    1.78 +          old transition.
    1.79 +          <span class="note">Note: This represents the logical start state of
    1.80 +          the transition, and allows some calculations to ignore that
    1.81 +          the transition started before that state was reached, which
    1.82 +          in turn allows repeated reversals of the same transition to
    1.83 +          work correctly.</span>
    1.84 +        </li>
    1.85 +
    1.86 +        <li>
    1.87 +          The <span>reversing shortening factor</span> of the new
    1.88 +          transition is the absolute value, clamped to the range [0, 1],
    1.89 +          of the sum of:
    1.90 +          <ol>
    1.91 +            <li>the output of the timing function of the old transition
    1.92 +            at the time of the <span>style change event</span>,
    1.93 +            times the <span>reversing shortening factor</span> of the
    1.94 +            old transition</li>
    1.95 +            <li>1 minus the <span>reversing shortening factor</span> of
    1.96 +            the old transition.</li>
    1.97 +          </ol>
    1.98 +          <span class="note">Note: This represents the portion of the
    1.99 +          space between the <span>reversing-adjusted start value</span>
   1.100 +          and the <span>end value</span> that the old transition has
   1.101 +          traversed (in amounts of the value, not time), except with the
   1.102 +          absolute value and clamping to handle timing functions that
   1.103 +          have y1 or y2 outside the range [0, 1].</span>
   1.104 +        </li>
   1.105 +
   1.106 +        <li>
   1.107 +          The matching transition-duration for the new transition is
   1.108 +          multiplied by the
   1.109 +          <span>reversing shortening factor</span>.
   1.110 +        </li>
   1.111 +
   1.112 +        <li>
   1.113 +          If the matching transition-delay for the new transition is
   1.114 +          negative, it is also multiplied by the
   1.115 +          <span>reversing shortening factor</span>.
   1.116 +        </li>
   1.117 +
   1.118 +      </ol>
   1.119 +
   1.120 +      <p class="note">
   1.121 +        Note that these rules do not fully address the problem for
   1.122 +        transition patterns that involve more than two states.
   1.123 +      </p>
   1.124 +
   1.125 +      <p class="note">
   1.126 +        Note that these rules lead to the entire timing function of the
   1.127 +        new transition being used, rather than jumping into the middle
   1.128 +        of a timing function, which can create a jarring effect.
   1.129 +      </p>
   1.130 +
   1.131 +      <p class="note">
   1.132 +        This was one of several possibilities that was considered by the
   1.133 +        working group.  See the
   1.134 +        <a href="transition-reversing-demo">reversing demo</a>
   1.135 +        demonstrating a number of them, leading to a working group
   1.136 +        resolution made on 2013-06-07 and edits made on 2013-11-11.
   1.137 +      </p>
   1.138 +
   1.139        <h2 id="application">
   1.140          Application of transitions
   1.141        </h2>
   1.142 @@ -1113,8 +1231,7 @@
   1.143          <span>start time</span> of the transition
   1.144          (that is, during the delay phase of the transition),
   1.145          this value is a specified style that will compute
   1.146 -        to the <span>before-change style</span> in the
   1.147 -        <span>style change event</span> in which the transition was started.
   1.148 +        to the <span>start value</span> of the transition.
   1.149        </p>
   1.150  
   1.151        <p>
   1.152 @@ -1123,98 +1240,12 @@
   1.153          (that is, during the duration phase of the transition),
   1.154          this value is a specified style that will compute
   1.155          to the <a href="#animatable-types">result of interpolating the property</a>
   1.156 -        using the <span>before-change style</span> for the property as
   1.157 +        using the <span>start value</span> of the transition as
   1.158          <i>V</i><sub>start</sub>,
   1.159 -        using the <span>after-change style</span> for the property as
   1.160 +        using the <span>end value</span> of the transition as
   1.161          <i>V</i><sub>end</sub>,
   1.162          and using (current time - start time) / (end time - start time)
   1.163          as the input to the timing function.
   1.164 -        (The <span>before-change style</span> and <span>after-change style</span>
   1.165 -        <span>style change event</span> in which the transition was started.)
   1.166 -      </p>
   1.167 -
   1.168 -      <h2 id="reversing">
   1.169 -        Automatically reversing interrupted transitions
   1.170 -      </h2>
   1.171 -      <p>
   1.172 -        A common type of transition effect is when a running transition is
   1.173 -        interrupted and the property is reset to its original value. An
   1.174 -        example is a hover effect on an element, where the pointer enters and
   1.175 -        exits the element before the effect has completed. If the outgoing and
   1.176 -        incoming transitions are executed using their specified durations and
   1.177 -        timing functions, the resulting effect can be distractingly
   1.178 -        asymmetric. Instead, the expected behavior is that the new transition
   1.179 -        should be the reverse of what has already executed.
   1.180 -      </p>
   1.181 -      
   1.182 -      <p>
   1.183 -        If a running transition with duration T, executing so far for duration TE, 
   1.184 -        from state A, to state B, is interrupted by
   1.185 -        a property change that would start a new transition back to state A, and
   1.186 -        all the transition attributes are the same (duration, delay and timing function),
   1.187 -        then the new transition must reverse the effect. The new transition must:
   1.188 -      </p>
   1.189 -      
   1.190 -      <ol>
   1.191 -        <li>
   1.192 -          Use the B and A states as its "from" and "to" states respectively. It
   1.193 -          does not use the current value as its from state, due to the rules below.
   1.194 -        </li>
   1.195 -        <li>
   1.196 -          Execute with the same duration T, but starting as if the transition had
   1.197 -          already begun, without any transition delay, at the moment which would
   1.198 -          cause the new transition to finish in TE from the moment of interruption. In other
   1.199 -          words, the new transition will execute as if it started T-TE in the past.
   1.200 -        </li>
   1.201 -        <li>
   1.202 -          Use a timing function that is the portion of the curve traversed up
   1.203 -          to the moment of interruption, followed in the opposite direction (towards
   1.204 -          the starting point). This will make the transition appear as if it 
   1.205 -          is playing backwards.
   1.206 -        </li>
   1.207 -        <li>
   1.208 -          Ignore any transition delay.
   1.209 -        </li>
   1.210 -      </ol>
   1.211 -
   1.212 -      <p>
   1.213 -        For example, suppose there is a transition with a duration of two
   1.214 -        seconds. If this transition is interrupted after 0.5 seconds and the
   1.215 -        property value assigned to the original value, then the new transition
   1.216 -        effect will be the reverse of the original, as if it had begun
   1.217 -        1.5 seconds in the past.
   1.218 -      </p>
   1.219 -
   1.220 -      <p>
   1.221 -        Note that by using the defined from and to states for the reversing
   1.222 -        transition, it is also possible that it may reverse again, if
   1.223 -        interrupted; for example, if the transition reversing to state A was
   1.224 -        again interrupted by a property change to state B.
   1.225 -      </p>
   1.226 -
   1.227 -      <p class="issue">Issue:
   1.228 -        This introduces the concept of reversing a timing function,
   1.229 -        which the spec has otherwise resisted doing, and also introduces
   1.230 -        a discontinuity between transitions that have
   1.231 -        almost completed (which get automatically reversed and thus have
   1.232 -        their timing function reversed) and transitions that have fully
   1.233 -        completed (where the reversal doesn't lead to the timing
   1.234 -        function being reversed).  An alternative proposal that avoids
   1.235 -        this is to follow the normal timing function algorithm, except
   1.236 -        multiply the duration (and also shorten any negative delay) by
   1.237 -        the (output) value of the transition timing function of the
   1.238 -        incomplete transition at the time it was interrupted, and, to
   1.239 -        account for multiple reverses in sequence, to divide by the
   1.240 -        shortening applied to the transition being interrupted.  For
   1.241 -        more details see this thread:
   1.242 -        <a href="http://lists.w3.org/Archives/Public/www-style/2009Nov/thread.html#msg302">November 2009 part</a>,
   1.243 -        <a href="http://lists.w3.org/Archives/Public/www-style/2009Dec/thread.html#msg319">December 2009 part</a>,
   1.244 -        <a href="http://lists.w3.org/Archives/Public/www-style/2010Jan/thread.html#msg136">January 2010 part</a>.
   1.245 -        Also see:
   1.246 -        <a href="http://lists.w3.org/Archives/Public/public-fx/2012AprJun/0107.html">minutes 2012-05-09</a> (and <a href="http://www.w3.org/Graphics/fx/track/actions/77">action</a>),
   1.247 -        <a href="http://lists.w3.org/Archives/Public/www-style/2012Nov/0262.html">minutes 2012-10-30</a>,
   1.248 -        <a href="transition-reversing-demo">reversing demo</a>.
   1.249 -        Working Group resolution from 2013-06-07 needs to be edited.
   1.250        </p>
   1.251  
   1.252        <h2 id="transition-events"><a id="transition-events-">

mercurial