使用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中间移动对象几次，对象不会在所有这些中间位置之间转换，只会转换到最终位置。但是，它确实会产生一些问题，比如你遇到了什么。

编辑：这篇文章在同一调用堆栈中无法在转换前动态设置初始元素转换，这表明存在一种变通方法，即在设置开始位置后，在设置最终位置之前，通过访问多个特定属性中的任何一个来强制浏览器布局。我自己没有试过。

这种变通办法似乎在Chrome中有效：http://jsfiddle.net/jfriend00/VqTHV/