Question

我有4个按钮，按钮1应该触发一个动画，按钮2应该反转那个动画，这个工作，虽然有一个小的css捕捉。（我希望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);
}

有时候，我得到一个引用错误，“element”没有定义，但有时候，没有抛出错误。它总是在页面刷新后工作。

以下是在上述函数中调用的add和remove类函数：

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

 };

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

链接到笔：

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

Answer 1

修改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);
	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>

功能只运行一次

1 个答案: