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/

使用CSS过渡设置源位置

1 个答案: