0
我正在尋找讓所有頁面向左,向右,向上,向下移動的方式。 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>
謝謝,現在的作品。 – Natalia