函數只運行一次

我有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

函數只運行一次

回答

相關問題