更改webkit css轉換的位置/目標值而不停止它？

是否可以在不停止運行的情況下更改正在運行的轉換的目標位置或屬性，因此它就像一個平滑的轉換？更改webkit css轉換的位置/目標值而不停止它？

讓我解釋一個例子，可以說我最初的動漫是：

-webkit-transition:-webkit-transform 5s ease-in-out 
-webkit-transform: translate3d(300px, 200px, 0px) rotate(20deg);

我設置使用JavaScript，如果在此之前的過渡到達終點，我想改變translate3d或旋轉新的值，但我不想停止轉換，我希望它順利過渡到這些新值，而不會中斷正在運行的轉換。如果我使用JavaScript設置新值，它會首先停止，然後開始轉向這些新值，這對我來說是一個不受歡迎的效果。

這是以任何方式可能嗎？或者是有另一種方法來關於它，我不想通過修改像top/left這樣的屬性來使用javascript todo動畫我更喜歡css動畫。

感謝

來源

2011-03-09 neph

很好，因爲這些轉換不是標準的，但我想它可能是一個錯誤 – n00b 2011-03-09 17:44:04

當轉換改變方向時，你期望發生什麼？例如： p {-webkit-transition：-webkit-transform 5s ease-in-out; -webkit-transform：translate3d（0px，0px，0px）; } p：hover { -webkit-transform：translate3d（100px，0px，0px）; } 如果停止在2.5秒處盤旋，轉換將需要從任何地方（大約50px）回到0px。它會繼續向100px方向發展嗎，但是在向0px轉向之前會慢下來嗎？ – Bryan 2011-05-26 16:25:48

我認爲最好的，最可調節的辦法是做與JS的轉變。讓JS改變變換。 JS知道它在轉換中有多遠，並且可以調整「路徑」以適應新的目標位置。您甚至可以實現貝塞爾曲線，以便在方向不同的情況下獲得平滑的曲線。然而，這是一個更多工作的地獄。

來源

2011-06-01 17:05:16 Gerben

更改webkit css轉換的位置/目標值而不停止它？

回答

相關問題