Animation funktioniert gut und funktioniert nicht gehen

Question

Ich bin auf der Suche nach Möglichkeiten, um alle Seiten nach links, rechts, oben, unten zu bewegen. Everithig ist ok mit Daunen, aber Teil oben funktioniert nicht gut. Ich lege alle Seiten in einen großen Behälter. Ich benutze drei kleinere Behälter (Display Flex). Ich habe alle Seiten ausgeblendet. Nur eins können wir sehen. Wenn wir uns nach unten bewegen, sehen wir das erste Kind des nächsten (letzten) Containers. Wenn wir uns auf Seiten bewegen (noch nicht getan), gehen wir zu nextSubline.Part down woks. Aber zeig mir jedes mal Faust-Faust-Fidcontainer und geh nach oben auf weißen Platz. Gibt es irgendwelche Ideen, warum es passiert? Vielleicht kannst du mir einen Tipp geben, wie ich das besser realisieren kann.

var down = document.getElementsByClassName("btn-arrow-down"); 
 
// var container= document.getElementsByClassName("container"); 
 
for (var i = 0; i < down.length; i++) { 
 
    down[i].onclick = function showNext(){ 
 
     var parent = this.parentElement; 
 
     var ourCont=parent.parentElement; 
 
     var nextCont=ourCont.nextElementSibling; 
 
     var pageToShow=nextCont.firstElementChild; 
 
     var contToMove=ourCont.parentElement; 
 
     
 
     contToMove.addEventListener('animationend',() => {    
 
      contToMove.classList.remove('page-moveUp'); 
 
      parent.classList.remove('page-visible'); 
 
     }); 
 
       
 
     pageToShow.classList.add('page-visible'); 
 
     contToMove.classList.add('page-moveUp'); 
 
     
 
    } 
 
} 
 

 
var up = document.getElementsByClassName("btn-arrow-up"); 
 

 
for (var i = 0; i < up.length; i++) { 
 
    up[i].onclick = function showLast(){   
 
     var parent = this.parentElement; 
 
     var ourCont=parent.parentElement; 
 
     var lastCont=ourCont.previousElementSibling; 
 
     var pageToShow=lastCont.firstElementChild; 
 
     var contToMove=ourCont.parentElement; 
 
     
 
     
 
     
 
     contToMove.addEventListener('animationend',() => { 
 
     contToMove.classList.remove('page-moveDown'); 
 
     parent.classList.remove('page-visible'); 
 
     
 
     }); 
 
     pageToShow.classList.add('page-visible'); 
 
     contToMove.classList.add('page-moveDown'); 
 
    
 
       
 
    } 
 
    
 
    
 
     
 
}

body{ 
 
    overflow-x: hidden; 
 
    overflow-y: hidden; 
 
    
 
} 
 

 
.container{ 
 
    display: flex; 
 
} 
 
.page{ 
 
    min-width: 100vw; 
 
    min-height: 100vh; 
 
    position: relative; 
 
    display: none; 
 
} 
 
.page-visible { 
 
    display: block; 
 
    } 
 
.q{ 
 
    background:purple; 
 
} 
 
.a{ 
 
    background:orange; 
 
} 
 
.z{ 
 
    background:red; 
 
} 
 
.w{ 
 
    background:brown; 
 
} 
 
.s{ 
 
    background:green; 
 
} 
 
.x{ 
 
    background:gray; 
 
} 
 
.e{ 
 
    background:rgb(42, 165, 83); 
 
} 
 
.d{ 
 
    background:rgb(91, 139, 91); 
 
} 
 
.c{ 
 
    background:rgb(168, 37, 37); 
 
} 
 
.page-moveUp { 
 
    animation: moveUp 3s ease both; 
 
    } 
 
    @keyframes moveUp { 
 
\t from {top:0px } 
 
\t to {transform: translateY(-100vh); } 
 
} 
 
.page-moveDown{ 
 
    animation: moveDown 10s ease both; 
 
} 
 
@keyframes moveDown { 
 
\t from{top:100vh } 
 
\t to {transform: translateY(100vh); } 
 
} 
 
.up{ 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 47%; 
 
} 
 
.down{ 
 
    position: absolute; 
 
    bottom: 50px; 
 
    left: 47%; 
 
} 
 
.left{ 
 
    position: absolute; 
 
    top: 45%; 
 
    left: 50px; 
 

 
} 
 
.right{ 
 
    position: absolute; 
 
    top: 45%;; 
 
    right: 50px; 
 

 
} 
 
span{ 
 
    cursor: pointer; 
 
}

<div class="super-container"> 
 
    <div class="container"> 
 
     <div class="page q page-visible"> 
 
      <span class="up btn-arrow-up">up</span> 
 
      <span class="left btn-arrow-left">left</span> 
 
      <span class="right btn-arrow-right">right</span> 
 
      <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
     <div class="page a"> 
 
       <span class="up btn-arrow-up">up</span> 
 
       <span class="left btn-arrow-left">left</span> 
 
       <span class="right btn-arrow-right">right</span> 
 
       <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
     <div class="page z"> 
 
       <span class="up btn-arrow-up">up</span> 
 
       <span class="left btn-arrow-left">left</span> 
 
       <span class="right btn-arrow-right">right</span> 
 
       <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
     <div class="page w"> 
 
       <span class="up btn-arrow-up">up</span> 
 
       <span class="left btn-arrow-left">left</span> 
 
       <span class="right btn-arrow-right">right</span> 
 
       <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
     <div class="page s"> 
 
      <span class="up btn-arrow-up">up</span> 
 
      <span class="left btn-arrow-left">left</span> 
 
      <span class="right btn-arrow-right">right</span> 
 
      <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
      <div class="page x"> 
 
        <span class="up btn-arrow-up">up</span> 
 
        <span class="left btn-arrow-left">left</span> 
 
        <span class="right btn-arrow-right">right</span> 
 
        <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
     <div class="page e"> 
 
       <span class="up btn-arrow-up">up</span> 
 
       <span class="left btn-arrow-left">left</span> 
 
       <span class="right btn-arrow-right">right</span> 
 
       <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
     <div class="page d"> 
 
       <span class="up btn-arrow-up">up</span> 
 
       <span class="left btn-arrow-left">left</span> 
 
       <span class="right btn-arrow-right">right</span> 
 
       <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
     <div class="page c"> 
 
       <span class="up btn-arrow-up">up</span> 
 
       <span class="left btn-arrow-left">left</span> 
 
       <span class="right btn-arrow-right">right</span> 
 
       <span class="down btn-arrow-down">down</span> 
 
     </div> 
 

 
    </div> 
 
</div>

Answer 1

Zwei Dinge:

1. Die Keyframes für den Umzug-down-Klasse waren falsch herum. Es sollte bei -100vh beginnen und bei 0vh enden.
2. Die animationend Zuhörer blieben, also würde der Zuhörer für den Move-Up auch dann feuern, wenn der Move-Down gespielt wurde.

var down = document.getElementsByClassName("btn-arrow-down"); 
 
// var container= document.getElementsByClassName("container"); 
 
for (var i = 0; i < down.length; i++) { 
 
    down[i].onclick = function showNext(){ 
 
     var parent = this.parentElement; 
 
     var ourCont=parent.parentElement; 
 
     var nextCont=ourCont.nextElementSibling; 
 
     var pageToShow=nextCont.firstElementChild; 
 
     var contToMove=ourCont.parentElement; 
 
     
 
     function animationEnded(){ 
 
      contToMove.classList.remove('page-moveUp'); 
 
      parent.classList.remove('page-visible'); 
 
      contToMove.removeEventListener('animationend',animationEnded); 
 
     } 
 
     contToMove.addEventListener('animationend',animationEnded); 
 
       
 
     pageToShow.classList.add('page-visible'); 
 
     contToMove.classList.add('page-moveUp'); 
 
     
 
    } 
 
} 
 

 
var up = document.getElementsByClassName("btn-arrow-up"); 
 

 
for (var i = 0; i < up.length; i++) { 
 
    up[i].onclick = function showLast(){   
 
     var parent = this.parentElement; 
 
     var ourCont=parent.parentElement; 
 
     var lastCont=ourCont.previousElementSibling; 
 
     var pageToShow=lastCont.firstElementChild; 
 
     var contToMove=ourCont.parentElement; 
 
     
 
     function animationEnded(){ 
 
      contToMove.classList.remove('page-moveDown'); 
 
      parent.classList.remove('page-visible'); 
 
      contToMove.removeEventListener('animationend',animationEnded); 
 
     } 
 
     contToMove.addEventListener('animationend',animationEnded); 
 
     
 
     contToMove.addEventListener('animationend',() => { 
 
     
 
     
 
     }); 
 
     pageToShow.classList.add('page-visible'); 
 
     contToMove.classList.add('page-moveDown'); 
 
    
 
       
 
    } 
 
    
 
    
 
     
 
}

body{ 
 
    overflow-x: hidden; 
 
    overflow-y: hidden; 
 
    
 
} 
 

 
.container{ 
 
    display: flex; 
 
} 
 
.page{ 
 
    min-width: 100vw; 
 
    min-height: 100vh; 
 
    position: relative; 
 
    display: none; 
 
} 
 
.page-visible { 
 
    display: block; 
 
    } 
 
.q{ 
 
    background:purple; 
 
} 
 
.a{ 
 
    background:orange; 
 
} 
 
.z{ 
 
    background:red; 
 
} 
 
.w{ 
 
    background:brown; 
 
} 
 
.s{ 
 
    background:green; 
 
} 
 
.x{ 
 
    background:gray; 
 
} 
 
.e{ 
 
    background:rgb(42, 165, 83); 
 
} 
 
.d{ 
 
    background:rgb(91, 139, 91); 
 
} 
 
.c{ 
 
    background:rgb(168, 37, 37); 
 
} 
 
.page-moveUp { 
 
    animation: moveUp 3s ease both; 
 
    } 
 
    @keyframes moveUp { 
 
\t from {top:0px } 
 
\t to {transform: translateY(-100vh); } 
 
} 
 
.page-moveDown{ 
 
    animation: moveDown 3s ease both; 
 
} 
 
@keyframes moveDown { 
 
\t from{ transform: translateY(-100vh); } 
 
\t to {transform: translateY(0); } 
 
} 
 
.up{ 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 47%; 
 
} 
 
.down{ 
 
    position: absolute; 
 
    bottom: 50px; 
 
    left: 47%; 
 
} 
 
.left{ 
 
    position: absolute; 
 
    top: 45%; 
 
    left: 50px; 
 

 
} 
 
.right{ 
 
    position: absolute; 
 
    top: 45%;; 
 
    right: 50px; 
 

 
} 
 
span{ 
 
    cursor: pointer; 
 
}

<div class="super-container"> 
 
    <div class="container"> 
 
     <div class="page q page-visible"> 
 
      <span class="up btn-arrow-up">up</span> 
 
      <span class="left btn-arrow-left">left</span> 
 
      <span class="right btn-arrow-right">right</span> 
 
      <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
     <div class="page a"> 
 
       <span class="up btn-arrow-up">up</span> 
 
       <span class="left btn-arrow-left">left</span> 
 
       <span class="right btn-arrow-right">right</span> 
 
       <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
     <div class="page z"> 
 
       <span class="up btn-arrow-up">up</span> 
 
       <span class="left btn-arrow-left">left</span> 
 
       <span class="right btn-arrow-right">right</span> 
 
       <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
     <div class="page w"> 
 
       <span class="up btn-arrow-up">up</span> 
 
       <span class="left btn-arrow-left">left</span> 
 
       <span class="right btn-arrow-right">right</span> 
 
       <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
     <div class="page s"> 
 
      <span class="up btn-arrow-up">up</span> 
 
      <span class="left btn-arrow-left">left</span> 
 
      <span class="right btn-arrow-right">right</span> 
 
      <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
      <div class="page x"> 
 
        <span class="up btn-arrow-up">up</span> 
 
        <span class="left btn-arrow-left">left</span> 
 
        <span class="right btn-arrow-right">right</span> 
 
        <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
     <div class="page e"> 
 
       <span class="up btn-arrow-up">up</span> 
 
       <span class="left btn-arrow-left">left</span> 
 
       <span class="right btn-arrow-right">right</span> 
 
       <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
     <div class="page d"> 
 
       <span class="up btn-arrow-up">up</span> 
 
       <span class="left btn-arrow-left">left</span> 
 
       <span class="right btn-arrow-right">right</span> 
 
       <span class="down btn-arrow-down">down</span> 
 
     </div> 
 
     <div class="page c"> 
 
       <span class="up btn-arrow-up">up</span> 
 
       <span class="left btn-arrow-left">left</span> 
 
       <span class="right btn-arrow-right">right</span> 
 
       <span class="down btn-arrow-down">down</span> 
 
     </div> 
 

 
    </div> 
 
</div>