設置使用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/