jQuery Mobile transition

jQuery Mobile innehåller CSS-effekter som låter dig välja hur sidan öppnas.

jQuery Mobile-overgångseffekter

jQuery Mobile har en rad effekter för hur man går från en sida till nästa.

Kommentar:För att kunna implementera övergångseffekter måste webbläsaren stödja CSS3 3D-omvandlingar:

Webbläsarstöd

  • Internet Explorer 10 stöder 3D-omvandlingar (äldre versioner stöder inte)
  • Opera stöder fortfarande inte 3D-omvandlingar

Övergångseffekter kan tillämpas på vilken som helst länk eller genom att använda data-transition-attributet för formulärinlämning:

<a href="#anylink" data-transition="slide">Glid till sida två</a>

Följande tabell visar de tillgängliga övergångar som kan användas tillsammans med data-transition-attributet:

Övergång Beskrivning Test
fade Standard. In- och utbelysning till nästa sida. Test
flip Bläddra från bakåt till nästa sida. Test
flow Kasta ut den aktuella sidan och introducera nästa sida. Test
pop Gå till nästa sida som ett popup-fönster. Test
slide Glid från höger till vänster till nästa sida. Test
slidefade Glid från höger till vänster och bländ in till nästa sida. Test
slideup Glid upp från botten till toppen till nästa sida. Test
slidedown Glid ner från topp till botten till nästa sida. Test
turn Gå till nästa sida. Test
none Ingen övergångseffekt. Test

Tips:I jQuery Mobile är in- och utbelysningseffekter som standard på alla länkar (om webbläsaren stöder det).

Tips:Alla effekter stöder samtidigt bakåtåtgärd, till exempel, om du vill att sidan ska glida från vänster till höger istället för från höger till vänster, använd data-direction-attributet med värdet "reverse". Det är standard på tillbakapiljten.

Exempel

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

Prova själv