【CSS3, JavaScript】画面遷移時のアニメーションに関して

　ウェブアプリケーションの画面遷移ってどうすればいいんですかね。単なるリンクでもいいんですが、それだと毎回css, jsの読込が走るのも馬鹿らしい気がします。今回はajaxを使って画面の一部を切り替えることで右から左へのアニメーションを含んだ画面遷移（風）の実現をしたいと思います。　

index.html

<div class="container">
  <div id="chageContent" class="contents page-top">
     <div class="wrap">
       <a class="btn pjax" href="html/page1.html">NEXT</a>
     </div>
  </div>
</div>

page1.html

<div class="container">
  <div id="pjaxContent" class="contents">
    <div class="page-1"></div>
  </div>
</div>

ざっくりとした流れはこんな感じを想定します。

1.CSSでアニメーション開始
2.アニメーション完了後、ajaxで通信開始（次ページ読込）
3.成功時に取得したページの要素に切り替え
4.切り替えたDOMにアニメーションに実行する

残念ながらこの方法だと、最初のアニメーションと次のアニメーションとの間に白いページが見えるのが気になりますよね。

それを回避したのが次の方法です。

1.ajaxで通信開始（次ページ読込）
2.成功時に取得したページを追加
3.CSS3のアニメーションを実行
4.アニメーション完了後に切り替え前のDOMを削除

こんな感じでしょうか。

main.css

@-webkit-keyframes right-to-left {
  from {
    margin-left: 0%;
    opacity: 1;
  }
  to {
    margin-left: -100%;
    opacity: 1;
  }
}

main.js

function nextPage ( nextPage, tdata) {
  $.ajax({
    type:'GET',
    url: nextPage,
    dataType:"html",
    success:function(data){
      $('#changeContent').after($(data).find('.page-1').css({
        "position": "absolute",
        "margin-left": "100%",
        "top" : "0"}));
      $('.container').css({
        "-webkit-animation": "right-to-left 0.3s",
        "-webkit-animation-fill-mode" : "forwards"});
    }
  });

  $(document).on( "webkitAnimationEnd", ".container", function(){
    $("#changeContent").remove();
});

これで画面遷移になりました。ポイントとしては読み込んだデータを画面外に配置するところです。そして、データをラップしたタグ自体にアニメーションを行います。

これは、画面遷移ではなくただのDOMの切り替えですのでURLに変更が加わりませんので気をつけるところですね。
この辺りを解消するために、HTML5から導入されたpushState/popStateを絡めてやるのがいいみたいです。

質より量ってことで、これからちゃんとアウトプットしていきたいと思います。