动画效果很好，不会工作

Question

我正在寻找让所有页面向左，向右，向上，向下移动的方式。 Everithig可以下来，但部分不起作用。我把所有的页面放在一个大容器中。我使用三个较小的容器（显示器弯曲）。我隐藏了所有页面。只有一个我们可以看到。当我们上下移动时，我们看到下一个（最后一个）容器的拳头小孩。当我们移动时（尚未完成），我们移动到nextSubline.Part down炒锅。但是每次拳头摆放拳头容器和上白色空间后，都要竖起拳头。有任何想法，为什么它发生？也许你可以给我advaice更好地实现这一点。

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

两件事情：

1. 的关键帧移动，挫类是围绕走错了路。它应该从-100vh开始并在0vh结束。
2. animationend听众仍然存在，因此即使播放下移，上移的听众也会触发。

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>