设置使用CSS源位置转换

Question

所以，我可以做这样的事情，创建一个元素的位置的动画：

Widget.style.left = Dest.x; 
Widget.style["-webkit-transition"] = "left 0.3s ease-in-out"; 

这个工作充满了想象，只要小部件已经存在。问题是，当我创建一个新的小部件，并希望从屏幕上启动它时，似乎没有一种明显而优雅的方式来设置开始位置。

可以预见的是，如果我试试这个：

Widget.style.left = Src.x; 
Widget.style.left = Dest.x; 
Widget.style["-webkit-transition"] = "left 0.3s ease-in-out"; 

源位置被忽略，似乎没有任何效果。

Answer 1

这既是一个问题，也是CSS转换的一个特性。浏览器只看到一个对象的“状态”，它可以用于转换，当你的javascript执行完毕时，只有当这种情况发生时，才能设置对象的“初始”状态，同样，只有这样，最终状态浏览器可以看到转换对象。这意味着：

Widget.style.left = Src.x; 
Widget.style.left = Dest.x; 

不会做任何事情。如果对象是全新的，浏览器将看到的唯一状态（用于转换的目的是Dest.x，并且将被视为初始状态（因此不会转换）。

我在它周围发现的唯一方法是让我的JavaScript的光洁度和使用定时器揭开序幕的过渡：

// create Widget 
Widget.style.left = Src.x; 
Widget.style["-webkit-transition"] = "left 0.3s ease-in-out"; 
// user a timer to get the current location marked as the starting location 
// and then set the new location 
setTimeout(function() { 
    Widget.style.left = Dest.x; // trigger transition from Src.x to Dest.x 
}, 0); 

我说这既是一个功能，一个问题，因为它有它的好处有它的问题以及如果移动的物体周围几次在一段javascript中，对象不会在所有这些中间位置之间转换，它只会转换到最后的位置。但是，它确实会产生问题，例如您遇到的问题。

编辑：这个帖子Cannot dynamically set initial element translation before transition in same call stack表明，有一个变通，迫使通过访问一些特定的属性中的任何一个，你设定的起始位置后，您设置的最终位置之前，浏览器的布局。我没有自己尝试过。

这项工作，各地似乎在Chrome在这里工作：http://jsfiddle.net/jfriend00/VqTHV/