使用Ajax和CSS3制作动画

Question

I am creating a little script that allows me to slide my content sections in and out though Ajax and CSS. I have have successfully made it slide in on page loads from the top but I have one problem, sliding out!

I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I have tried a few things but I either have the page lock up, stop loading, or simply not initiate correctly. I included the the working code with the whole 'aniIn' CSS because it contains ability to function on -moz -webkit but only the basic animation code for 'aniOut' to save on the space of my thread.

Can someone push me towards a resources to help me learn what I need to do?

My site is live with the working slide in at 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 Script:

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();}

and the 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>

previously posted with no answer at: Previous Post

Answer 1

I tried several ways after @Zeta referenced MDN website. I decided to stay with animation element because I can set the effect such as a bounce or position movement speeds( progressive slow down ).

The first attempt I wanted to try pure CSS but I couldn't get it and I haven't received any feedback on why question to why .

Then I tried to do it with JavaScript and had some success. I do have one issue with the script right now but this is a official fix to what I was trying. (Note: Current issue is the first Link clicked will not transition, I may have a solution though)

See the links for code solutions.