javascript - 使用 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并取得了一些成功。我现在的脚本确实有一个问题，但这是对我正在尝试的问题的官方修复。 (注意:当前的问题是第一个点击的链接不会转换，不过我可能有解决方案)

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