ページ遷移時にアニメーションさせる [PJAX]

PJAXを用いて、スムーズなページ遷移を実装してみます。


PJAX
http://falsandtru.github.io/jquery-pjax/


デモページ
※syntaxhighlighterに干渉されるようなので別途デモページを作成しました。

Load Files


HTML

Angkor Wat

JavaScript

$.pjax({
    area : '#content',
    link : 'a:not([target])',
    ajax : { timeout: 2500 },
    wait : 500
});
$(document).bind('pjax:fetch', function(){
    $('body').css('overflow', 'hidden');
    $('#content').attr({'class': 'fadeOut'});
});
$(document).bind('pjax:render', function(){
    $('#content').attr({'class': 'fadeIn'});
    $('body').css('overflow', '');
});

CSS

.fadeOut {
  -webkit-animation: fadeOut .5s cubic-bezier(.55,0,.1,1) both;
  animation: fadeOut .5s cubic-bezier(.55,0,.1,1) both;
}
.fadeIn {
  -webkit-animation: fadeIn .5s cubic-bezier(.55,0,.1,1) both;
  animation: fadeIn .5s cubic-bezier(.55,0,.1,1) both;
}
@-webkit-keyframes fadeOut { to { opacity: 0; -webkit-transform: scale(1.2); }}
@keyframes fadeOut { to { opacity: 0; -webkit-transform: scale(1.2); transform: scale(1.2); }}
@-webkit-keyframes fadeIn { from { opacity: 0; -webkit-transform: scale(.8); }}
@keyframes fadeIn { from { opacity: 0; -webkit-transform: scale(.8); transform: scale(.8); }}