html禁⽌页⾯动画,CSS动画之animation再次触发与防⽌多次
触发
上⼀篇博客记录了animation的介绍，这次记录⼀下具体的使⽤。
1.再次触发动画
可以通过给元素添加类名来触发animation动画，但是需要注意的是再次触发的情况。
⽐如，如果想每次点击⿏标都能重新触发动画，CSS和JS并没有提供这种功能。我们能做的就是要先除去动画的效果，然后让⽂档重新计算样式，最后将动画效果再次添加到元素上。
假定有下⾯的页⾯
// HTML:
Click me to run the animation
//CSS
.box {
width: 100px;
height: 100px;
border: 1px solid black;
}
@keyframes colorchange {
0% { background: yellow }
100% { background: blue }
}
.changing {
animation: colorchange 2s;
}
下⾯的代码是⽆效的。
// JS
document.querySelector('#runButton').addEventListener('click',function(){
document.querySelector('.box').className = 'box';
document.querySelector('.box').className = 'box changing';
});
css鼠标点击样式因为没有实现先除去动画的效果，然后让⽂档重新计算样式，最后将动画再次添加到元素上的效果。
1.1 解决⽅法⼀
// JS
function play() {
document.querySelector(".box").className = "box";
document.querySelector(".box").className = "box changing";
});
});
}
document.querySelector("#runButton").addEventListener("click", play, false);
document.querySelector(".box").className = "box"；是除去动画的效果。
第⼀个questAniationFrame告诉浏览器我要执⾏⼀个动画，请求浏览器执⾏该⽅法的参数所指定的函数。
浏览器执⾏了这个参数所指定的⽅法，告诉浏览器我⼜要执⾏⼀个⽅法，希望浏览器在重新绘制页⾯之前执⾏另⼀个函数，即document.querySelector(".box").className = "box changing";,
然后浏览器重新绘制了页⾯。
最后执⾏了document.querySelector(".box").className = "box changing";,
给.box添加changing类名，将动画效果再次添加到元素上。
综上，就实现了再次触发动画的效果。
1.2 解决⽅法⼆
来⾃实践所得。
// JS
function play() {
document.querySelector(".box").className = "box";
setTimeout(() => {
document.querySelector(".box").className = "box changing";
},0);
}
document.querySelector("#runButton").addEventListener("click", play, false);
原理还不清楚，可能跟异步代码和浏览器的渲染规则有关系吧，⽇后查清楚再来更新。
2.防⽌多次重复触发动画
有时候不希望每次点击都让动画从头开始，⽽是等动画结束之后才能再次触发。
2.1 ⽅法⼀
当希望再次触发动画时，判断有没有应⽤动画的类名，没有的话，才再次触发。
// JS
function play() {
if($(".box").hasClass('changing')){return;}
setTimeout(() => {
$(".box").addClass = "changing";
},0);
}
document.querySelector("#runButton").addEventListener("click", play, false);
2.2 ⽅法⼆
前⾯的⽅法是先除去含有动画效果的类名，然后再添加类名以触发动画。
还可以先添加类名触发动画，等动画结束后再除去带有动画效果类名。
// JS
function play() {
if($(".box").hasClass('changing')){return;}
$(".box").addClass = "changing";
setTimeout(() => {
$(".box").removeClass = "changing";
},1000);
}
document.querySelector("#runButton").addEventListener("click", play, false)；缺点是需要确定动画的时间，⽽且添加了异步代码，好像这样是不好的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。