2012-03-17 4 views
0

所以,我可以做这样的事情,创建一个元素的位置的动画:设置使用CSS源位置转换

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"; 

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

回答

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/

+0

我想这可能是解决方案,我想我只是希望能有像widget.style.commit()或类似的东西存在的东西。 – Arelius 2012-03-17 20:46:41

+0

我发现了一个潜在的解决方法,并将其添加到我的答案的末尾。 – jfriend00 2012-03-17 21:04:51

+0

嗯,我没有真正尝试做一个最小的测试用例,但在我的应用程序中,似乎这不起作用,现在它似乎移动到第一个位置,然后一旦超时到期,它将移动到第二个没有动画。只有*如果*这是一个新项目,但是如果它已经存在一段时间,它就会正确地进行动画。 – Arelius 2012-03-17 21:06:00