javascript - 动画向下运行良好，向上运行则不起作用

标签 javascript animation

我正在寻找使所有页面向左、向右、向上、向下移动的方法。 Everithig 适合向下，但部分向上效果不佳。我把所有页面放在一个大容器中。我使用三个较小的容器(显示柔性)。我隐藏了所有页面。我们只能看到一个。当我们向下和向上移动时，我们会看到下一个(最后一个)容器的第一个子级。当我们向两侧移动时(尚未完成)，我们移动到下一条子线。向下部分工作。但是每次拳头 child 拳头容器都显示给我，然后上升到空白区域。有什么想法为什么会发生吗？也许你可以给我建议如何更好地实现这一点。

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>

最佳答案

有两件事:

  1. 下移类的关键帧是错误的。它应该从 -100vh 开始，到 0vh 结束。
  2. 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/

上一篇：javascript - 如何正确从 DOM javascript 中删除？

下一篇：javascript - 确定 React `onFocus` 事件是否由鼠标、键盘、编程触发？

相关文章：

javascript - 未捕获的类型错误 : Cannot read property 'remove' of undefined

javascript - 将ajax数据发送到symfony2中的php Controller

javascript - 如何避免在开始时显示 {{ ... }} ？

javascript - 使用 .animate() 跳转到 div

CSS 动画在 Chrome 中工作而不在 Safari 中工作

cocoa - 使用 CoreAnimation 实现全屏动画效果？

javascript - Three.JS中使用switch语句加载多个对象

javascript - 如何用 Javascript 覆盖 CSS3 动画？

javascript - 使用 Zepto jumpy 的 Bootstrap 警告框高度动画

jquery - 当相邻元素淡出时动画位置

©2024 IT工具网  联系我们