效果不

效果不

关注
发信
关注(28)粉丝(399)

javascript - 动画效果不错，但效果不好

我正在寻找使所有页面左，右，上，下移动的方法。
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/

10-11 05:36
Powered by LMLPHP ©2024 效果不 0.033299