Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make github style page transitions by pjax

Once a time, I read an article said that github page transition is made by pjax, I checked jquery-pjax project. I think I have close to the answer, it must be something related with event pjax:start and pjax:end, but I still can't get it works, so I try to get some help here.

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

But it has no effects

like image 990
guilin 桂林 Avatar asked Nov 04 '11 18:11

guilin 桂林


1 Answers

Github use HTML5 features for the page transitions. That includes the new JS History API and CSS3 transitions. No jQuery involved except for standard event listening, selectors. The blog post is here with all the relevant links https://github.com/blog/760-the-tree-slider

like image 184
sciritai Avatar answered Oct 08 '22 10:10

sciritai