Seitenfolie ohne Jquery?

Question

Ich versuche, einen Seitenfolienübergang ohne jQuery mit dynamischem Inhalt (Ajax) zu machen. Ich wollte zuerst versuchen, es nur mit CSS zu tun, aber mein Versuch hat nicht funktioniert und niemand hat bisher auf meine CSS question Antwort darauf reagiert.

Ich entschied mich, dies mit JavaScript zu tun, aber ich kann nicht scheinen, die Klasse zu laden, wenn ich es wünsche. Irgendein Rat?

Meine Demo-Versuch: Test Page

Und der Code:

javascript:

function pageSlide (n) { 
    var slide = document.getElementById(n); 

    if(slide.className === 'aniDown') { 
     slide.className = 'aniUp'; } 
    else if (slide.className === 'aniUp'){ 
     slide.className = 'aniDown'; } } 

function sectionAssure(classID) { 

    pageSlide(classID); 

    setTimeout(function () { 

     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' } 
      sel[i].style.display = tmp; } 

    pageSlide(classID); }, (1000)); 
} 

css:

.aniDown { 
z-index:0; 
-webkit-animation-name: slideDown; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-timing-function: ease; 
-webkit-animation-direction:normal; 
} 

@-webkit-keyframes slideDown { 
0% { margin-top:-3000px; } 
40% { margin-top:-100px; } 
100% { margin-top:0px;  } 
} 

.saniUp { 
-webkit-animation-name: slideUp; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-timing-function: ease; 
-webkit-animation-direction:normal; 
} 

@-webkit-keyframes slideUp { 
0% {margin-top:0px;} 
20% {margin-top:-1000px;} 
100% {margin-top:-3000px;} 
} 

html5:

<header> 
    <nav id="headNav"> 
     <ul> 
      <li><a href="#" onclick="checkPage('page1', 'home.html');return false">Home</a></li> 
      <li><a href="#" onclick="checkPage('page2', 'about.html');return false">About</a></li> 
     </ul> 
    </nav> 
</header> 

<!-- Content Areas: (Variable visual)--> 
<div id="contentBody"> 
    <br> 
    <section class="aniDown" id="page1"> 
     <script>loadContent('page1','home.html');</script> 
    </section> 
    <section class="aniDown" id="page2"></section> 
</div> 

Answer 1

Ich hatte mehrere Fehler in diesem. Zuerst war ein Tippfehler im css-Klassennamen. Zweitens war das Abschnittselement, das ich zu .aniUp sagte, die classID des Ziels. Hier

ist fix:

"use strick"; 
    function slideUp (n) { 
     var tmp = ''; 
     var slide = document.getElementById(n); 
     var sectionClass = document.getElementsByTagName('section'); 

     for (var i=0; i<sectionClass.length; i++){ 

      if (sectionClass[i].style.display == 'block') { 
       console.log("Content Up"); 
       tmp = 'aniUp'; } 

      sectionClass[i].className = tmp; } 
     } 

    function slideDown (n) { 
     var slide = document.getElementById(n); 

     var tmp = ''; 
     var sel = document.getElementsByTagName('section'); 

     for (var i=0; i<sel.length; i++){ 

      if (sel[i].id == n) { 
       console.log("Content Down"); 
       tmp = 'aniDown'; } 

      sel[i].className = tmp; } 
     } 

    function sectionAssure(classID) { 

     console.log("Start Click"); 
     slideUp(classID); 

     setTimeout(function () { 

      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' } 
       sel[i].style.display = tmp; } 

      console.log("Reset to Down"); 
      slideDown(classID); }, (1000)); 
    } 

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

    function checkPage (classID, url) { 
     sectionAssure (classID); 
     loadContent (classID, url); } 

und in dem CSS-.saniUp zu .aniUp.