动画效果很好而且不起作用

Question

我正在寻找让所有页面向左，向右，向上，向下移动的方法。 Everithig可以顺利完成，但是部分工作并不顺利。我将所有页面放在一个大容器中。我使用三个较小的容器（显示flex）。我隐藏了所有页面。我们只能看到一个。在向下移动的时候，看下一个（最后）容器的拳头小孩。当我们向侧面移动时（还没有完成）我们移动到nextSubline.Part down woks。但是每次拳头chid拳头容器和上升到白色空间后，就把它展示出来。有什么想法会发生吗？也许你可以告诉我如何更好地实现这一点。

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 {
	from {top:0px }
	to {transform: translateY(-100vh); }
}
.page-moveDown{
    animation: moveDown 10s ease both;
}
@keyframes moveDown {
	from{top:100vh }
	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听众仍然存在，所以即使进行了下移，听众也会动起来。
＆＃13;
＆＃13;
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');   
    
              
    }
    
    
     
}
＆＃13;
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 {
	from {top:0px }
	to {transform: translateY(-100vh); }
}
.page-moveDown{
    animation: moveDown 3s ease both;
}
@keyframes moveDown {
	from{ transform: translateY(-100vh); }
	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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;