按下按钮后如何使页面向左或向右移动（动画）？

Question

我正在寻找让所有页面向左，向右，向上，向下移动的方法。一切都很好，无论是向下还是向上。左右不要像我想要的那样完美地工作。页面之间有空白区域。我将所有页面放在一个大容器中。我使用三个较小的容器（显示flex）。我隐藏了所有页面。我们只能看到一个。在向下移动的时候，看下一个（最后）容器的拳头小孩。当我们向侧面移动时，我们移动到nextSubline.Part向下和向上工作。但是当双方移动时，我首先看到的是页面移动而不是白色屏幕而不是新页面。有什么想法为什么两页之间是白色的？我猜这个问题是我的css转换。我给了不正确，但找不到我应该如何做到的方式。

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

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

        pageToShow.classList.add('page-visible');
        contToMove.classList.add('page-moveDown');


    }

}

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

for (var i = 0; i < left.length; i++) {
    left[i].onclick = function showLeft() {
        var parent = this.parentElement;
        var maybeLeftToOpen = parent.previousElementSibling;
        var ourCont = parent.parentElement;
        var contToMove = ourCont.parentElement;
        var cls = maybeLeftToOpen.className;
        var clsarray = cls.split();

        for (var j = 0; j < clsarray.length; j++) {
            var name = clsarray[j];
            if (name = 'page') {
                var leftToOpen = maybeLeftToOpen;

                function animationEnded() {
                    contToMove.classList.remove('page-moveLeft');
                    parent.classList.remove('page-visible');
                    contToMove.removeEventListener('animationend', animationEnded);
                }

                contToMove.addEventListener('animationend', animationEnded);

                leftToOpen.classList.add('page-visible');
                contToMove.classList.add('page-moveLeft');

            }

        }
    }

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

for (var i = 0; i < right.length; i++) {
    right[i].onclick = function showRight() {
        var parent = this.parentElement;
        var maybeRightToOpen = parent.nextElementSibling;
        var ourCont = parent.parentElement;
        var contToMove = ourCont.parentElement;
        var cls = maybeRightToOpen.className;
        var clsarray = cls.split();
        for (var j = 0; j < clsarray.length; j++) {
            var name = clsarray[j];
            if (name = 'page') {
                var rightToOpen = maybeRightToOpen;

                function animationEnded() {
                    contToMove.classList.remove('page-moveRight');
                    parent.classList.remove('page-visible');
                    contToMove.removeEventListener('animationend', animationEnded);
                }
                contToMove.addEventListener('animationend', animationEnded);
                rightToOpen.classList.add('page-visible');
                contToMove.classList.add('page-moveRight');

            }
        }
    }
}

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


.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); } */
    to{top:0px}
}
.page-moveLeft{
    animation: moveLeft 6s ease both;
}
@keyframes moveLeft {
	from{transform: translateX(-100vw);}
	to {transform: translateX(0);}
}
.page-moveRight{
    animation: moveRight 6s ease both;
}
@keyframes moveRight {
	from{left:0}
	to {transform: translateX(-100vw);}
}

<div class="super-container">
    <div class="container1">
        <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="container2">
        <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="container3">
            <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

我发现了我的错误 - 应该给flex1，container2，container3。