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-">