函数只运行一次

我有4个按钮，按钮1应该触发一个动画，按钮2应该颠倒那个动画，这个工作，虽然有一个小的css catch（我希望div通过点击按钮返回到位置2，没有先出现，然后被动画，我也很高兴为此解决方案）。函数只运行一次

现在按钮3导致div飞出，按钮4将它们带回原位，但此过程仅适用一次。

我发现点击触发下列功能

function animationTwo() { 
    var div1 = document.querySelector('.inner1'); 
    var div2 = document.querySelector('.inner2'); 
    var div3 = document.querySelector('.inner3'); 
    var div4 = document.querySelector('.inner4'); 

    removeAllClasses('div1', 'div2', 'div3', 'div4'); 

    setTimeout(function() { 
     addClass(div1, 'outTopLeft'); 
     addClass(div2, 'outTopRight'); 
     addClass(div3, 'outTopRight'); 
     addClass(div4, 'outTopRight'); 
    }, 100); 
} 

function reverseAnimationTwo() { 
    var div1 = document.querySelector('.inner1'); 
    var div2 = document.querySelector('.inner2'); 
    var div3 = document.querySelector('.inner3'); 
    var div4 = document.querySelector('.inner4'); 

    removeAllClasses('div1', 'div2', 'div3', 'div4'); 

    setTimeout(function() { 
     addClass(div1, 'inAgain'); 
     addClass(div2, 'inAgain'); 
     addClass(div3, 'inAgain'); 
     addClass(div4, 'inAgain'); 
    }, 100); 
}

有时候，我得到的是没有定义，“元素”的引用错误，但有时，也没有抛出错误。它始终在页面刷新后生效。

这里有添加和移除被称为在上述功能类功能：

function addClass(element, classToAdd) { 
    var currentClassValue = element.className; 
    if (currentClassValue.indexOf(classToAdd) == -1) { 
     if ((currentClassValue == null) || (currentClassValue === "")) { 
      element.className = classToAdd; 
     } else { 
      element.className += " " + classToAdd; 
     } 
    } 
} 

function removeAllClasses(el, el, el, el) { 
    var currentClassValue = el.className; 
    el.className = ""; 

};

另一件事是，我想必须错开，每个格动画，就像一个触发时点击第一个按钮，但我没有成功既不循环也不回调，我试过了。点击按钮3和4时滚动条，我该如何避免这些？我知道这是JS和Css问题的混合体，我希望这不会让任何人不安。

链接到笔：

http://codepen.io/damianocel/pen/QdKyzm

来源

2017-01-22 ptts

你似乎有两个函数调用'reverseAnimationOne' –

方注意：学会使用'Element.classList' propiece'a dd（）'＆'remove（）'方法添加和删除CSS类 – Satpal

@JohnHascall，谢谢，我已经删除了其中的一个，尽管如此。 satpal，我已经和有缺陷的className属性一起走了，因为我没有想到用Element.classList去除所有类。如果您有解决方案，我很乐意了解它。 – ptts

修改你的removeAllClasses(el,el,el,el)功能后，它正在

var aniOne = document.getElementById('move'); 
 
var aniOneReversed = document.getElementById('moveBack'); 
 
var aniTwo = document.getElementById('move2'); 
 
var aniTwoReversed = document.getElementById('moveBack2'); 
 
aniOne.addEventListener('click', function() { 
 
    animationOne(); 
 
}); 
 
aniOneReversed.addEventListener('click', function() { 
 
    reverseAnimationOne(); 
 
}); 
 
aniTwo.addEventListener('click', function() { 
 
    animationTwo(); 
 
}); 
 
aniTwoReversed.addEventListener('click', function() { 
 
    reverseAnimationTwo(); 
 
}); 
 
function animationOne() { 
 
    var allDivs = document.querySelectorAll('div'); 
 
    [].forEach.call(allDivs, function (allDivs, i) { 
 
     allDivs.classList.remove('animationOneReversed'); 
 
     setTimeout(function() { 
 
      allDivs.classList.add('animationOne'); 
 
     }, 100 * i); 
 
    }); 
 
} 
 
function reverseAnimationOne() { 
 
    var allDivs = document.querySelectorAll('div'); 
 
    [].forEach.call(allDivs, function (allDivs, i) { 
 
     allDivs.classList.remove('animationOne'); 
 
     setTimeout(function() { 
 
      allDivs.classList.add('animationOneReversed'); 
 
     }, 100 * i); 
 
    }); 
 
} 
 
function animationTwo() { 
 

 
    var div1 = document.querySelector('.inner1'); 
 
    var div2 = document.querySelector('.inner2'); 
 
    var div3 = document.querySelector('.inner3'); 
 
    var div4 = document.querySelector('.inner4'); 
 
    removeAllClasses(div1); 
 
\t removeAllClasses(div2); 
 
\t removeAllClasses(div3); 
 
\t removeAllClasses(div4); 
 
    setTimeout(function() { 
 
     addClass(div1, 'outTopLeft'); 
 
     addClass(div2, 'outTopRight'); 
 
     addClass(div3, 'outTopRight'); 
 
     addClass(div4, 'outTopRight'); 
 
    }, 100); 
 
} 
 
function reverseAnimationOne() { 
 
    var allDivs = document.querySelectorAll('div'); 
 
    [].forEach.call(allDivs, function (allDivs, i) { 
 
     allDivs.classList.remove('animationOne'); 
 
     setTimeout(function() { 
 
      allDivs.classList.add('animationOneReversed'); 
 
     }, 100 * i); 
 
    }); 
 
} 
 
function reverseAnimationTwo() { 
 
    var div1 = document.querySelector('.inner1'); 
 
    var div2 = document.querySelector('.inner2'); 
 
    var div3 = document.querySelector('.inner3'); 
 
    var div4 = document.querySelector('.inner4'); 
 
    
 
    setTimeout(function() { 
 
     addClass(div1, 'inAgain'); 
 
     addClass(div2, 'inAgain'); 
 
     addClass(div3, 'inAgain'); 
 
     addClass(div4, 'inAgain'); 
 
    }, 100); 
 
} 
 
function addClass(element, classToAdd) { 
 
    var currentClassValue = element.className; 
 
    if (currentClassValue.indexOf(classToAdd) == -1) { 
 
     if (currentClassValue == null || currentClassValue === '') { 
 
      element.className = classToAdd; 
 
     } else { 
 
      element.className += ' ' + classToAdd; 
 
     } 
 
    } 
 
} 
 
function removeAllClasses(el) { 
 
    var currentClassValue = el.className; 
 
\t currentClassValue=currentClassValue.split(" "); 
 
\t if(currentClassValue[1]!=""){ 
 
\t \t el.className = currentClassValue[0]; 
 
\t } 
 
    
 
}

.wrapper { 
 
    perspective: 800px; 
 
    position:relative; 
 
    
 
    margin:0 auto; 
 
    width:1000px; 
 
    height:500px; 
 
    border:black 10px solid; 
 
    padding:30px; 
 
} 
 

 
.wrapperInner { 
 
    position:relative; 
 
    
 
    width:100%; 
 
    height:500px; 
 
    transform-style: preserve-3d; 
 
    transition: transform 1s; 
 
    
 
    margin: 0 auto; 
 
    
 
    padding: 30px; 
 
    
 
} 
 

 

 
div { 
 
    
 
    
 
    height:40%; 
 
    width:40%; 
 
    background-image: url(http://scontent.cdninstagram.com/t51.2885-15/e35/12728470_425209597603876_513397964_n.jpg?ig_cache_key=MTE5MDA5Nzg0MjkxOTc4NTAzNg%3D%3D.2); 
 
    background-size: 100% 100%; 
 
    border:2px pink solid; 
 
    margin:40px; 
 
    
 
} 
 

 
.inner1 { 
 
    position:absolute; 
 
    top:0px; 
 
    left:0; 
 
} 
 
.inner2 { 
 
    position:absolute; 
 
    top:0px; 
 
    right:0; 
 
} 
 
.inner3 { 
 
    position:absolute; 
 
    bottom:0px; 
 
    left:0; 
 
} 
 
.inner4 { 
 
    position:absolute; 
 
    bottom:0px; 
 
    right:0; 
 
} 
 

 
@keyframes turner{ 
 
    0% { transform:rotateY(0deg); } 
 
    15% { transform:rotate(360deg); } 
 
    40% { transform:skew(23deg,22deg); } 
 
    50% { transform:translateX(50%);} 
 
    60% { transform:skew(-23deg,-22deg);} 
 
    70% { transform:translateX(-250%);} 
 
    80% { opacity:.9;} 
 
    100% { transform:scale(0);} 
 
} 
 
@keyframes turnerBack{ 
 
    0% { opacity:0; } 
 
    15% { transform:scale(.3); } 
 
    40% { transform:skew(-23deg,-22deg); } 
 
    50% { transform:translateX(-50%);} 
 
    60% { transform:skew(23deg,22deg);} 
 
    70% { transform:translateX(150%);} 
 
    80% { opacity:1;} 
 
    100% { transform:scale(1);} 
 
} 
 
.animationOne { 
 
    animation: turner 3s 1; 
 
    backface-visibility: visible; 
 
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ 
 
    animation-fill-mode: forwards; 
 
} 
 
.animationOneReversed { 
 
    
 
    
 
    animation: turnerBack 3s 1; 
 
    backface-visibility: visible; 
 
    -webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */ 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.outTopLeft { 
 
    transition:2s; 
 
    transform:translate(-100%,-100%); 
 
} 
 
.outBottomLeft { 
 
    transition:2s; 
 
    transform:translate(-100%,100%); 
 
} 
 
.outTopRight { 
 
    transition:2s; 
 
    transform:translate(200%,-100%); 
 
} 
 
.outBottomRight { 
 
    transition:2s; 
 
    transform:translate(200%,100%); 
 
} 
 
.inAgain { 
 
    transition:1s; 
 
    transform:translate(0); 
 
}

<button id="move">Click for animation</button> 
 
<button id="moveBack">Click to reverse animation</button> 
 
<button id="move2">Click for animation 2</button> 
 
<button id="moveBack2">Click to reverse animation 2</button> 
 
<section class="wrappper"> 
 
    <section class="wrappperInner"> 
 
    <div class="inner1"></div> 
 
    <div class="inner2"></div> 
 
    <div class="inner3"></div> 
 
    <div class="inner4"></div> 
 
    </section> 
 

 

 
</section>

来源

2017-01-22 16:14:22

很棒。现在，div如何以交错的方式飞出去？我知道这比动画1功能要困难得多。 – ptts

改变过渡到2秒它会慢慢地生成 –

我已经用settimeouts完成了它，但它看起来非常冗长，我认为这可以做得更容易，但它确实按照预期工作，检查出来： http：// codepen.io/damianocel/pen/QdKyzm 我的意思不只是速度较慢的动画，我的意思是在不同时间动画的div。 – ptts

函数只运行一次

回答

相关问题