Слайд страницы без JQuery?

Question

Я пытаюсь выполнить переход слайдов страницы без jQuery с динамическим контентом (Ajax). Я сначала хотел попробовать и сделать это только с CSS, но моя попытка не сработала, и никто еще не ответил на мой вопрос CSS question о том, как это сделать.

Я решил попробовать это сделать с помощью JavaScript, но я не могу загрузить класс, когда захочу. Любой совет?

Моя демонстрационная попытка: Test Page

И код:

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

У меня было несколько ошибок в этом. Сначала была опечатка в имени класса css. Во-вторых, элемент секции, который я указывал .aniUp, был идентификатором класса targetID.

Вот исправление:

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

, и в CSS .saniUp к .aniUp.