jQuery Mobile 會自動導入特定動畫效果以支援換頁的視覺變化,透過屬性設定可輕易轉換,這篇簡單的來看看 ~~
jQuery/jQuery Mobile 技術文件 》(持續新增中…)
在 jQuery Mobile 虛擬頁面 這篇裏面,談到了 jQuery Mobile 的多頁設計,而當多個虛擬頁面進行切換時,jQuery Mobile 會自動導入特定動畫效果以支援換頁的視覺變化,你可以透過 data-transition 屬性的設定,調整所使用的換頁動畫。以下列舉可用的屬性值:
屬性值
|
說明
|
slide
|
從右到左,或是從左到右的滑動動畫。
|
slideup
|
從下到上的動畫。
|
slidedown
|
從上到下的動畫。
|
slidefade
|
滑動合併淡出淡入動畫。
|
pop
|
以最小化的外觀於畫面中央出現,直到佔滿螢幕。
|
fade
|
淡出淡入,新舊畫面交錯出現。
|
flip
|
模擬旋轉動畫。
|
flow
|
縮小畫面再滑出目前位置。
|
turn
|
由遠到近翻頁進入呈現。
|
none
|
不套用動畫。
|
屬性值的設定語法如下:
<a href="#b" data-transition="slide" >
// 頁面內容 …
</a>
如你所見, data-transition 屬性必須在連結上作設定,如此一來,動畫會在此連結啟動時發生作用,請者請參考 jQuery Mobile 虛擬頁面 其中的範例,逐一加上 data-transition 屬性,測試不同屬性值的效果。
jQuery/jQuery Mobile 技術文件 》(持續新增中…)