AjaxとCSS3を使ったアニメーション

Question

AjaxとCSSを使ってコンテンツセクションをスライドさせるスクリプトを作成しています。私は正常にそれが上からページの読み込みにスライドを作ったが、私はスライドアウト1つの問題があります！

私は 'aniOut'のクリップも書きましたが、それは動作しますが、私はトランジションの前に1つの読み込みを行うように見えます。私はいくつかのことを試しましたが、私はページをロックしたり、読み込みを停止したり、正しく起動したりしません。私は作業用コードを 'aniIn' CSS全体に含めました。なぜなら、それは-moz -webkit上で機能する機能を含んでいるからです。しかし、スレッドのスペースを節約するための 'aniOut'用の基本アニメーションコードだけです。

誰かがリソースに向かって私をプッシュできますか？

私のサイトは、作業中のスライドがThe Mind Companyにあります。

CSS：

header { 
     z-index:100; 
     position:relative; 
     display: block; 
     background-color: #272727; 
     height:100px;} 

    #contentBody { 
     min-height:48em;} 

    footer { 
     position:relative; 
     display: block; 
     background-color: #272727; 
     height:168px; } 

    #aboutPage { 
     display:none;} 

    #productPage { 
     display:none;} 

    #contactPage { 
     display:none;} 

    .aniIn { 
z-index:0; 
-webkit-animation-name: ANIMATEin; 
-webkit-animation-duration: 1s; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-timing-function: ease-in; 

-moz-animation-name: ANIMATEin; 
-moz-animation-duration: 1s; 
-moz-animation-iteration-count: 1; 
-moz-animation-timing-function: ease-in; 

/* Currently Not Working in browsers: Is planed for implimentation in later versions. */ 
animation-name: ANIMATEin; 
animation-duration: 1s; 
animation-iteration-count: 1; 
animation-timing-function: ease-in; 

-ms-animation-name: ANIMATEin; 
-ms-animation-duration: 1s; 
-ms-animation-iteration-count: 1; 
-ms-animation-timing-function: ease-in; 
} 

@-webkit-keyframes ANIMATEin { 
from { 
margin-top:-3000px; 
} 
to { 
margin-top:0px; 
} 
} 

@-moz-keyframes ANIMATEin { 
from { 
margin-top:-3000px; 
} 
to { 
margin-top:0px; 
} 
} 

@keyframes ANIMATEin { 
from { 
margin-top:-3000px; 
} 
to { 
margin-top:0px; 
} 
} 

.aniOut { 
z-index:0; 
animation-name: ANIMATEout; 
animation-duration: 1s; 
animation-iteration-count: 1; 
animation-timing-function: ease-in; 
} 

@keyframes ANIMATEout { 
from { 
margin-top:0px; 
} 
to { 
margin-top:3000px; 
} 
} 

Javaスクリプト：

function $_(IDS) { return document.getElementById(IDS); } 

function ani(){ 
    document.getElementById(classID).className ='aniOut'; 
} 

function checkPage(classID, url){ 
    var tmp = ''; 
    var sel = document.getElementsByTagName('section'); 
    for (var i=0; i<sel.length; i++){ 
     if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' } 
     $_(classID).className ='aniIn'; 
     sel[i].style.display = tmp;} 
    $_(classID).style.display = 'block';  
    loadContent(classID, url); } 

function loadContent (classID, url){ 
    var xmlhttp; 
    if (window.XMLHttpRequest){ 
     xmlhttp=new XMLHttpRequest();} 

    xmlhttp.onreadystatechange=function(){ 
     if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
      document.getElementById(classID).innerHTML=xmlhttp.responseText;}} 

    xmlhttp.open("GET","content/"+url,true); 
    xmlhttp.send();} 

とHTML5：私はSeveraのを試してみましたPrevious Post

Answer 1

：

<!-- Header Areas: (Constent visual)--> 
<header> 
     <li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li> 
     <li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li> 
     <li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li> 
</header> 

<!-- Content Areas: (Variable visual)--> 
<div id="contentBody"> 
    <section id="aboutPage"></section> 
    <section id="productPage"></section> 
    <section id="contactPage"></section> 
</div> 

<!-- Footer Area: (Constant visual)--> 
<footer></footer> 

が以前に応答なしでポスト@ZetaがMDNのウェブサイトを参照した後の方法。私は、バウンスやポジションの移動速度（プログレッシブスローダウン）などの効果を設定できるので、アニメーション要素にとどまることに決めました。

私は純粋なCSSを試したかったが、私はそれを手に入れることができなかったし、なぜquestion to whyのフィードバックも受け取っていない。

私はwith JavaScriptをしようとしましたが、いくつかの成功を収めました。今はスクリプトに1つの問題がありますが、これは私が試していたものに対する公式の修正です。 （注：現在の問題は、クリックされた最初のリンクが移行しないため、解決策があるかもしれません）

コードソリューションのリンクを参照してください。