CODEWITHSUNDEEP
javascriptcss
ptts
ptts

Reputation: 1053

Function only running once

I have 4 buttons, button 1 should trigger an animation, button 2 should reverse that animation, this works, with a small css catch, though.(I want the divs to come back into position by clicking button 2, not appearing first, then being animated, I would be happy about a solution for this as well).

Now button 3 causes the divs to fly out, button 4 brings them back into place, but this process only works once.

I have the following functions triggered on click

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

Sometimes, I get a reference error, "element" is not defined, but sometimes, there is no error thrown. It always works after page refresh.

Here are the add and remove class functions which are called in the above functions:

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

 };

Another thing is, I would like to have the animations to be staggered for each div, like the one triggered when clicking the first button, but I have no success with neither loop nor callbacks, I have tried. And the scrollbars when clicking button 3 and 4, how can I avoid these? I know this is a mix of JS and Css questions, and I hope this does not upset anyone.

Link to pen:

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

Upvotes: 0

Views: 79

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

After Modifying Your removeAllClasses(el,el,el,el) function, it is working

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);
	removeAllClasses(div2);
	removeAllClasses(div3);
	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;
	currentClassValue=currentClassValue.split(" ");
	if(currentClassValue[1]!=""){
		el.className = currentClassValue[0];
	}
    
}
.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>

Upvotes: 1

Related Questions