- From: louis-rémi Babé <lrbabe@gmail.com>
- Date: Wed, 4 Apr 2012 17:15:48 +0200
- To: www-style@w3.org
- Message-ID: <CALXxKfCKZd+P0mH2oFyDkBgps56WqwQnLSMpKk1nrqiFXScqVA@mail.gmail.com>
Hi, It is really convenient for a web author to be able to trigger a transition of a style property relative to its current state. For example, to animate an (absolutely positioned) element with a 200px transition to the right, one can do: elem.style.transition = "all ease 1s"; elem.style.left = parseFloat( window.getComputedStyle( elem ).left ) + 200 + "px"; Now imagine I want to rotate an element by 300° clockwise, relative to its current transform: elem.style.transition = "all ease 1s"; var cs = window.getComputedStyle( elem ).transform; elem.style.transform = ( cs != "none" ? cs : " " ) + " rotate(300deg)"; According to the draft of the interpolation algorithm[1], if the current transform of the element is "none", it will be animated as expected. Otherwise the web author has no way to predict if the element will be animated clockwise or not, as illustrated in this jsfiddle : http://jsfiddle.net/rhukk/6/ If the web author tries to rotate an element by 360° relative to its current transform, no animation could happen at all. There's however a simple way to make those transitions happen as expected : it is easy to detect that the 'from' transform is a single function of same type and same value as the first function of the 'to' transform. This function can be "removed" from both function lists while they're being interpolated, and applied on each step of the transition before the list of interpolated functions. For example, if the 'from' is 'matrix(1,0,0,1,0,0)' and the 'to' is 'matrix(1,0,0,1,0,0) rotate(360deg)' then the function lists would be interpolated as if 'from' was 'none' and 'to' was 'rotate(360deg)', but at each step of the transition, the transform of the element should be 'matrix(1,0,0,1,0,0) rotate(<interpolated value for this step>)'. Would it be possible to add such a condition to the current #animation section of the transform draft? Thank you in advance, Louis-Rémi [1] http://dev.w3.org/csswg/css3-transforms/#animation
Received on Wednesday, 4 April 2012 15:16:42 UTC