我正在寻找使所有页面左,右,上,下移动的方法。
Everithig可以接受降级,但是部分向上不能很好地工作。我将所有页面放在一个大容器中。我使用三个较小的容器(显示弯曲)。我隐藏了所有页面。我们只能看到一个。当我们上下移动时,我们看到下一个(最后一个)容器的拳头孩子。当我们向两侧移动时(尚未完成),我们移至nextSubline。但是每次放拳头容器后都要放给我看,然后去空白处。有什么想法为什么会发生吗?也许您可以给我提个醒,如何更好地实现这一目标。
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>
最佳答案
两件事情:
下移类的关键帧是错误的处理方法。它应该从-100vh开始,到0vh结束。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 {
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;
}
<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>
关于javascript - 动画效果不错,但效果不好,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46993515/