jQuery Mobile Transition

Ang jQuery Mobile ay naglalaman ng mga CSS epekto na nagbibigay-daan sa iyo na piliin ang paraan ng pagsisimula ng pahina.

Transisyon ng jQuery Mobile

May isang serye ng epekto ang jQuery Mobile tungkol sa kung paano magsi-transisyon mula sa isang pahina papunta sa susunod na pahina.

Paliwanag:Upang maisakatuparan ang epekto ng transisyon, ang browser ay dapat sumusuporta sa CSS3 3D transformation:

Suporta ng browser

  • Ang Internet Explorer 10 ay sumusuporta sa 3D transformation (ang mas maagang bersyon ay hindi sumusuporta)
  • Ang Opera ay hindi pa sumusuporta sa 3D transformation

Ang epekto ng transisyon ay maaaring gamitin sa anumang link o sa pagsisumite ng form sa pamamagitan ng paggamit ng data-transition attribute:

<a href="#anylink" data-transition="slide">Mag-slide papunta sa pangalawang pahina</a>

Ang sumusunod na talahanayan ay nagpapakita ng mga magagamit na transisyon na maaring gamitin kasama ang data-transition attribute:

Transisyon Paglalarawan Test
fade Default. Pagbabalik-balik ng liwanag papunta sa susunod na pahina. Test
flip Mag-flip mula sa likod papunta sa unang pahina. Test
flow Itapon ang kasalukuyang pahina at ilagay ang susunod na pahina. Test
pop Lumipat sa susunod na pahina tulad ng isang pop-up window. Test
slide Mag-slide mula kanan papunta sa kiri sa susunod na pahina. Test
slidefade Mag-slide mula kanan papunta sa kiri at lumipat sa susunod na pahina sa pamamagitan ng pagbabalik-balik ng liwanag. Test
slideup Mag-slide mula ibaba papunta sa susunod na pahina. Test
slidedown Mag-slide mula taas papunta sa susunod na pahina. Test
turn Lumipat sa susunod na pahina. Test
none Wala ng transisyon ng epekto. Test

Mga Payo:Sa jQuery Mobile, ang pagbabalik-balik ng liwanag ay default sa lahat ng link (kung ang browser ay sumusuporta).

Mga Payo:Ang lahat ng mga epekto ay sumusuporta sa pagbaligtad na pagkilos, halimbawa, kung nais mong mag滑动 ng pahina mula sa kaliwa papunta sa kanan sa halip na mula sa kanan papunta sa kaliwa, gamitin ang attribute na data-direction na may halaga na "reverse". Ito ay default sa pindutan ng pagbalik.

Example

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Gulayan</a>

Try It Yourself