Re: [css3-transforms] Interpolation of relative transitions

On Apr 4, 2012, at 8:15 AM, louis-rémi Babé wrote:

> 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>)'.
I am not sure if I understand your proposal correctly. But IIRC you want to just animate your rotate independent of the other values in the list? How should an UA know which value should be animated and which not if you have different count of transform functions (what is the case for your example)? Also what if you have the same count of transform functions of the same type in the same order but all have different values. How should the UA figure out what you want to animate and what not?

Something that you can do is nesting div boxes:

<div>
  <div style="transform: rotate() translate() …">
  </div>
</div>

Now you can rotate the outer div box independent of the transformation of its content. Or for your example where you add the rotate at the end of the list:
<div style="transform: rotate() translate() …">
  <div>
  </div>
</div>

And rotate the inner div box.

Does that help?

Greetings,
Dirk

> 
> 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 18:27:15 UTC