使用 Ajax 和 CSS3 制作动画

Question

我正在创建一个小脚本，允许我通过 Ajax 和 CSS 将内容部分滑入和滑出。我已经成功地让它在页面加载时从顶部滑入，但我有一个问题，滑出！

我为“aniOut”编写了一个也可以使用的剪辑，但我似乎无法在过渡中先加载一个加载。我已经尝试了一些事情，但我要么锁定了页面，停止加载，要么根本没有正确启动。我在整个 '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：

<!-- 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>

以前在Previous Post发帖没有回答

Answer 1

@Zeta 引用 MDN 网站后，我尝试了几种方法。我决定继续使用动画元素，因为我可以设置反弹或位置移动速度（渐进式减速）等效果。

我第一次尝试纯 CSS，但我没有得到它，我还没有收到任何关于为什么 question to why 的反馈。

然后我尝试这样做with JavaScript并取得了一些成功。我现在确实有一个脚本问题，但这是我正在尝试的官方修复。 （注意：当前的问题是第一个链接点击不会转换，不过我可能有一个解决方案）

查看代码解决方案的链接。