javascript - 使用 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/