Funktion läuft nur einmal

Question

Ich habe 4 Tasten, Taste 1 sollte eine Animation auslösen, Taste 2 sollte diese Animation umkehren, das funktioniert, mit einem kleinen CSS-Catch, obwohl. (Ich möchte die divs wieder in Position durch Klicken auf die Schaltfläche 2, nicht zuerst erscheinen, dann animiert werden, wäre ich glücklich über eine Lösung für diese auch).

Jetzt Taste 3 bewirkt, dass die divs herausfliegen, Taste 4 bringt sie wieder an ihren Platz, aber dieser Prozess funktioniert nur einmal.

Ich habe die folgenden Funktionen auf Klick ausgelöst

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); 
} 

Manchmal bekomme ich einen Referenzfehler, „Element“ ist nicht definiert, aber manchmal gibt es keinen geworfen Fehler. Es funktioniert immer nach der Seitenaktualisierung.

Hier sind die Add- und Klassenfunktionen entfernen, die in den obigen Funktionen aufgerufen werden:

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 = ""; 

}; 

Eine andere Sache ist, möchte ich die Animationen werden müssen, gestaffelt für jedes div, wie die ausgelöst wird, wenn Klicken Sie auf die erste Schaltfläche, aber ich habe keinen Erfolg mit weder Schleife noch Rückrufe, ich habe es versucht. Und die Bildlaufleisten beim Anklicken der Schaltflächen 3 und 4, wie kann ich diese vermeiden? Ich weiß, das ist eine Mischung aus JS und Css Fragen, und ich hoffe, dass dies niemanden verärgert.

Link zu Stift:

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

Answer 1

Nach Ihre removeAllClasses(el,el,el,el) Funktion ändern, es funktioniert

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>