如何防止在css過渡期間跳轉？

我正在開發一個「堆棧」組件，其靈感來自。如何防止在css過渡期間跳轉？

DEMO HERE。該演示在桌面版Chrome上運行良好。但是這個轉換不適用於我的iOS Safari。我提取了一個small snippet，發現動畫開始和結束時會有空間跳躍。跳轉發生在桌面版Chrome以及iOS Safari中。

因此，我的堆棧轉換不能在iOS Safari上工作的原因是，您只能看到跳轉，但轉換。只要您將轉換時間從.3s延長到1s，就會在開始時看到跳轉，轉換和跳轉。

爲什麼在開始和結束時會跳轉？如何防止它，使過渡更平滑？

更新：感謝@vals。片段的跳躍效果是由於我的錯誤導致的 - 我更改了transform css而不是.stack-pane而不是div s。該片段的錯誤已修復。

但是，我仍然不知道如何防止在我的堆棧演示中在iOS Safari上跳轉。

This snippet可以更好地說明我的問題。請在iOS Safari上嘗試。

事實證明，在iOS Safari上，在轉換結束時會發生意外跳轉。

更新：這是非常奇怪的是，一吃完飯，實現平穩過渡，回到我的iOS Safari瀏覽器...我的微信晚餐時墜毀，我重新打開它。過渡變得平穩。所以也許這很簡單，因爲當我測試片段時，我的iPhone很慢。

來源

2015-12-29 Moon

@CodeiSir，[摘錄]（http://codepen.io/lzl124631x/pen/NxbdWZ）也重現跳在我的桌面Chrome上。我更喜歡css過渡到css動畫，因爲它更容易配置（過渡時間，不透明度等），'jquery動畫'，因爲'jquery animate'不能動畫'變換'很容易（必須使用步驟），我擔心關於使用'jquery animate'爲許多堆棧窗格設置動畫的效率。我不知道跳轉是因爲在瀏覽器中動畫「translate3d」緩慢。讓我做一些實驗。 – Moon

您要變換「格」 S，所以你申請的變化既.STACK和.stackpane。

但是隻有.stackpane有一個轉換集。

因此，改變.STACK（也可能是不需要的）突然做

來源

2015-12-29 10:18:56 vals

啊，你說得對。 'stack'相關的類是在我的js代碼之後添加的。我犯這個愚蠢的錯誤 – Moon

http://codepen.io/anon/pen/PZbWQM

的問題是，在i + 1

$(this).css({ 
    transform: 'translate3d(' + (-50 * (i + 0)) + 'px, 0, ' + (50 * (i + 0)) + 'px)' 
});

至極使得它直接跳到

來源

2015-12-29 10:12:49 CoderPi

如何防止在css過渡期間跳轉？

回答

相關問題