函数只运行一次
问题描述:
我有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问题的混合体,我希望这不会让任何人不安。
链接到笔:
答
修改你的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>
你似乎有两个函数调用'reverseAnimationOne' –
方注意:学会使用'Element.classList' propiece'a dd()'&'remove()'方法添加和删除CSS类 – Satpal
@JohnHascall,谢谢,我已经删除了其中的一个,尽管如此。 satpal,我已经和有缺陷的className属性一起走了,因为我没有想到用Element.classList去除所有类。如果您有解决方案,我很乐意了解它。 – ptts