Jquery가없는 페이지 슬라이드?

Question

동적 컨텐츠 (Ajax)가없는 jQuery없이 페이지 슬라이드 전환을 시도하고 있습니다. 나는 처음에는 CSS로 해보고 싶었지만 시도는 효과가 없었고 누구도 내 CSS question에 응답하지 않았습니다.

자바 스크립트로이 작업을 수행하기로 결정했지만 원하는 경우 클래스를로드 할 수 없습니다. 어떤 충고?

내 데모 시도 : Test Page

그리고 코드 :

자바 스크립트 :

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에게 말한 섹션 요소가 대상의 classID입니다. 여기

는 수정이다

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

및 .aniUp의 CSS의 .saniUp있다.