jQuery Mobile - 過渡動畫

它允許在指定持續時間內更改屬性值，並透過為每個狀態應用不同的樣式，將元素的行為從一個狀態更改為另一個狀態。

下表列出了 jQuery Mobile 框架中使用的一些頁面過渡動畫 -

序號	過渡動畫及描述	適用於頁面	適用於對話方塊
1	淡入淡出 (fade) 您可以使元素淡入淡出可見。	淡入淡出頁面	淡入淡出對話方塊
2	翻轉 (flip) 將元素從背面翻轉到正面到下一頁。	翻轉頁面	翻轉對話方塊
3	彈出 (pop) 您可以建立一個彈出視窗。	彈出頁面	彈出對話方塊
4	流動 (flow) 透過將當前頁面移開的方式顯示下一頁。	流動頁面	流動對話方塊
5	滑動 (slide) 您可以將頁面從右向左滑動。	滑動頁面	滑動對話方塊
6	滑動淡入 (slidefade) 將頁面從右向左滑動，並淡入下一頁。	滑動淡入頁面	滑動淡入對話方塊
7	向上滑動 (slideup) 將頁面從底部向上滑動。	向上滑動頁面	向上滑動對話方塊
8	向下滑動 (slidedown) 將頁面從頂部向下滑動。	向下滑動頁面	向下滑動對話方塊
9	翻頁 (turn) 您可以翻到下一頁。	翻頁頁面	翻頁對話方塊
10	無 (none) 使用此屬性時，您不能使用任何過渡動畫效果。	無頁面	無對話方塊

設定過渡動畫和全域性配置

預設情況下，頁面在框架中將具有淡入淡出 (fade)過渡動畫。您可以透過向連結新增data-transition屬性來使用自定義過渡動畫。您可以使用defaultPageTransition選項全域性地使用不同的預設頁面過渡動畫效果。對於對話方塊，您可以使用defaultDialogTransition選項。

回退過渡動畫

除了淡入淡出 (fade) 過渡動畫外，所有過渡動畫都支援 3D 變換。不支援 3D 變換的裝置必須使用淡入淡出 (fade) 過渡動畫。某些瀏覽器不支援每種過渡動畫型別的 3D 變換，因此您可以使用淡入淡出 (fade)作為預設的過渡動畫回退。

過渡動畫的最大滾動距離

當您從頁面滾動到頁面或從頁面滾動到頁面，並且滾動位置是裝置螢幕高度的三倍時，過渡動畫將設定為無。有時，當您單擊任何導航元素時，您可能會發現響應速度變慢或瀏覽器可能會崩潰；因此，為了避免這種情況，我們使用getMaxScrollForTransition函式透過使用滾動位置來進行過渡動畫。

過渡動畫的最大寬度

當視窗寬度高於畫素寬度時，您可以停用過渡動畫。您可以使用$.mobile.maxTransitionWidth全域性選項配置過渡動畫的最大寬度，該選項預設為 false。它採用畫素寬度或 false 值，如果它不是 false 值，則當視窗高於指定值時，過渡動畫將設定為無。

相同頁面的過渡動畫

您可以使用頁面容器小部件的change()方法的allowSamePageTransition選項將過渡動畫新增到當前頁面。

建立自定義過渡動畫

您可以使用$.mobile.transitionHandlers選項在頁面中建立自定義過渡動畫，該選項擴充套件了網站或應用程式上過渡動畫的選擇。

列印頁面