jQuery Mobile - Transizioni
Consente di modificare i valori delle proprietà che si verificano durante la durata specificata e altera il comportamento di un elemento da uno stato a un altro applicando stili diversi per ogni stato.
La tabella seguente elenca alcune delle transizioni di pagina utilizzate nel framework jQuery Mobile -
| Sr.No. | Transizione e descrizione | Per Pages | Per i dialoghi |
|---|---|---|---|
| 1 | fade Puoi rendere gli elementi in dissolvenza in entrata e in uscita dalla visibilità. |
Dissolvenza pagina | Finestra di dialogo Dissolvenza |
| 2 | flip Capovolgi gli elementi dalla parte posteriore in avanti alla pagina successiva. |
Capovolgi pagina | Finestra di dialogo Capovolgi |
| 3 | pop Puoi creare una finestra popup. |
Pagina pop | Finestra di dialogo Pop |
| 4 | flow Visualizza la pagina successiva tenendo lontana la pagina corrente. |
Pagina flusso | Finestra di dialogo Flusso |
| 5 | slide Puoi far scorrere la pagina da destra a sinistra. |
Pagina diapositiva | Dialogo diapositiva |
| 6 | slidefade Fa scorrere la pagina da destra a sinistra e sfuma nella pagina successiva. |
Pagina in dissolvenza | Finestra di dialogo Slidefade |
| 7 | slideup Fa scorrere la pagina dal basso verso l'alto. |
Pagina a scorrimento | Finestra di dialogo a scorrimento |
| 8 | slidedown Fa scorrere la pagina dall'alto verso il basso. |
Pagina a scorrimento | Finestra di dialogo a scorrimento |
| 9 | turn Puoi passare alla pagina successiva. |
Voltare pagina | Turn Dialog |
| 10 | none Non è possibile utilizzare alcun effetto di transizione utilizzando questo attributo. |
Nessuna pagina | Nessuno dialogo |
Impostazione della transizione e configurazione globale
Per impostazione predefinita, le pagine avranno fadetransizione nel quadro. Puoi usare transizioni personalizzate aggiungendo il filedata-transitionattributo al collegamento. È possibile utilizzare diversi effetti di transizione predefiniti per la pagina utilizzandodefaultPageTransitionopzione a livello globale. Per i dialoghi, puoi usaredefaultDialogTransition opzione.
Transizione di fallback
Tutte le transizioni supportano le trasformazioni 3D tranne la transizione in dissolvenza. I dispositivi che non supportano la trasformazione 3D, dovranno utilizzare la transizione in dissolvenza. Alcuni browser non supportano le trasformazioni 3D per ogni tipo di transizione, quindi puoi utilizzare l'estensionefade come fallback di transizione predefinito.
Scorrimento massimo per transizioni
Le transizioni sono impostate su Nessuno quando si scorre da o verso una pagina e la posizione di scorrimento sarà tre volte l'altezza dello schermo del dispositivo. A volte, potresti rallentare nella risposta o il browser potrebbe bloccarsi quando fai clic su un elemento di navigazione; quindi per evitare ciò stiamo usando la posizione di scorrimento per la transizione usandogetMaxScrollForTransition funzione.
Larghezza massima per le transizioni
È possibile disabilitare la transizione quando la larghezza della finestra è maggiore della larghezza in pixel. È possibile configurare la larghezza massima per le transizioni utilizzando il$.mobile.maxTransitionWidthopzione globale, che è impostata su false per impostazione predefinita. Accetta valori come larghezza in pixel o valore falso e la transizione sarà impostata su nessuno se non è un valore falso quando la finestra è superiore al valore specificato.
Transizione della stessa pagina
È possibile aggiungere le transizioni alla pagina corrente utilizzando il allowSamePageTransition opzione dei widget del contenitore della pagina change() metodo.
Creazione di transizioni personalizzate
Puoi creare le transizioni personalizzate nella pagina usando il $.mobile.transitionHandlers opzione che espande la selezione delle transizioni sul sito Web o sull'applicazione.