Come creare transizioni di pagina in stile github di pjax

Una volta, ho letto un articolo che diceva che la transizione di pagina github è stata eseguita da pjax, ho controllato il progetto jquery-pjax. Penso di avere vicino la risposta, deve essere qualcosa correlato all'evento pjax:start e pjax:end, ma non riesco ancora a farlo funzionare, quindi cerco di ottenere un aiuto qui.Come creare transizioni di pagina in stile github di pjax

$('a.pjax').pjax('#main'); 
$('#main').bind('pjax:start', function(){$('#main').slideUp()}) 
    .bind('pjax:end'), function(){$('#main').slideDown()});

Ma non ha effetti

fonte

2011-11-04 guilin 桂林

Stai parlando di come quando si scava attraverso il codice delle pagine successive/precedenti scivolare dentro e fuori? Questo è fatto con HTML5 History API e basic comportamentale JS. –

@CalvinFroedge sì, sto parlando della pagina di visualizzazione del codice e non intendi niente riguardo a pjax? –

Sì, il nocciolo di ciò che rende questo lavoro è l'API della cronologia: http://html5demos.com/history Otterrai richieste dopo aver eseguito il passaggio a un nuovo URL. La parte degli effetti può essere eseguita con jQuery standard animato. –

Github utilizzare le funzionalità HTML5 per le transizioni di pagina. Ciò include le nuove API della cronologia JS e le transizioni CSS3. Nessuna jQuery in questione tranne per l'ascolto di eventi standard, i selettori. Il post sul blog è qui con tutti i collegamenti relativi https://github.com/blog/760-the-tree-slider

fonte

2011-11-04 23:34:22 sciritai

Ho letto questo articolo, ancora nessuna idea –

Non so se questo è rilevante a tutti. Ma ho usato Pjax me stesso e il codice è un errore di sintassi sopra, dovrebbe essere:

$('a.pjax').pjax('#main'); 
$('#main').bind('pjax:start', function(){$('#main').slideUp()}) 
.bind('pjax:end', function(){$('#main').slideDown()});

Edit: Sì, dispiace di non segnalazione. Esattamente come @Udo Held ha detto: è necessario rimuovere la parentesi dopo 'pjax: end' altrimenti non seguirà ed eseguirà la funzione $ ('# main'). SlideDown().

fonte

2012-01-04 21:40:50 Michael

Probabilmente dovresti indicare che l'errore è difficile distinguere la differenza: Devi rimuovere la parentesi dopo '.bind ('pjax: end'' e poi ripetere il codice di lavoro o qualcosa di simile. –

Pjax: Demo, Source[Github]
È quello che uso github .. reference

fonte

2013-06-15 08:06:02

molto grazie per questo ho passato una settimana alla ricerca e finalmente ho capito github out thx al tuo link di riferimento – Noitidart

Come creare transizioni di pagina in stile github di pjax

risposta

Problemi correlati