0
私はすべてのページを左、右、上、下に移動する方法を模索しています。すべてがダウンとアップで大丈夫です。右と左は私が望むようにexectly仕事をしません。ページ間に空白があります。私はすべてのページを大きな容器に入れました。私は3つの小さな容器（フレックス表示）を使用します。私はすべてのページを隠した。私たちが見ることができるのは1人だけです。私たちが上下に動くと、次の（最後の）容器の拳の子供が見えます。私たちが両側を移動するとき、私たちは次のサブバンに移動します。しかし、辺が動くと、最初は白い画面よりもページ移動のように見えますし、新しいページよりもそうです。私は問題が私の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 {
\t from {top:0px }
\t 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 {
\t from{transform: translateX(-100vw);}
\t to {transform: translateX(0);}
}
.page-moveRight{
animation: moveRight 6s ease both;
}
@keyframes moveRight {
\t from{left:0}
\t 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>