使用jQuery和/或CSS3轉換動畫基於百分比的位置（通過插件）

我試圖製作一個頁面佈局，其中包含導航到的幻燈片。每個部分填充屏幕（100％寬度/高度）並絕對定位在基於百分比的值。使用jQuery和/或CSS3轉換動畫基於百分比的位置（通過插件）

在所附的樣品中，有四個區段，定位爲如下：

 
[a] 
[b][c][d]

其中[A]是在0 0，並[b]在0 100％，[C]爲100％時100％，[d]爲200％100％。

現在，爲了實現導航，我將所有部分置於100％100％絕對定位的溢出隱藏容器中。當一個部分被導航到時，容器的'頂部'和'左'值被動畫化爲部分偏移的負值，例如，如果選擇了[d]，則容器將動畫至-200％-100％。

奇怪的行爲盛行！當導航到0％偏移量（向左或向上）時，轉換工作正常。然而，其他組合（即負偏移）導致似乎不合邏輯（但一致）的怪癖。

見自己：http://www.doronassayas.com/ypsite

這裏有一個總結：

[C]和[d]爲[A]或[B]正常工作。
[a]到[b]和[a]到[d]：跳到最後，跳回到開頭並開始動畫。
[a]和[b]到[c]是最奇怪的 - 在轉換開始之前，整個主體（或某些其他高級元素？）彈出到某些不可通過CSS追蹤的視覺偏移（不可見在Firebug和其他開發工具中）。因此，儘管CSS值清楚地表明我們應該在[c]，但不是以[c]結束，而是以[直觀]結束。在Firebug層次結構中執行諸如單擊之類的隨機操作會將視圖重置爲正確的位置。 WTF？

在Firefox 4，鉻10和Safari 5測試這一點，並且發生在所有的瀏覽器相同的行爲，無論是使用jQuery.animate（）或Louis Remi's very cool jQuery.transition plugin，其簡單地與沿施加-prefix過渡到容器調用animate（）時的新偏移值。

奇怪的一致性引起了我的興趣。有任何想法嗎？

任何幫助非常感謝。

來源

2011-05-02 D. A. Terre

經過相當長的拔毛後，我終於通過在body元素上打開overflow：auto來診斷出小車行爲。結果表明，帶負值的定位滑塊會對計算得出的身體寬度和高度造成嚴重影響，在轉換過程中會不斷變化（並且從未實際上停留在窗口的100％上，這是預期的行爲）。結果是body元素的滾動條和滾動位置出現波動，儘管跨瀏覽器出奇的一致。

該溶液被證明是非常簡單的：

body 
{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    padding: 0; 
    margin: 0; 
}

固定位置，這是我以前從未使用的，使人體元件保持固定的大小和位置，而忽略其內容的任何變化。而且你有它！感謝jQuery和Louis Remi，可愛的過渡，硬件加速。

來源

2011-05-03 22:33:54

使用jQuery和/或CSS3轉換動畫基於百分比的位置（通過插件）

回答

相關問題