window.requestAniationFrame(callback)方法告诉浏览器你要执行一个动画，并请求浏览器在重新绘绘制页面之前执行一个函数。
上面的代码中，
document.querySelector(".box").className = "box";是除去动画的效果。
第一个window.requestAniationFrame告诉浏览器我要执行一个动画，请求浏览器执行该方法的参数所指定的函数。
浏览器执行了这个参数所指定的方法，告诉浏览器我又要执行一个方法，希望浏览器在重新绘制页面之前执行另一个函数，即
document.querySelector(".box").className = "box changing";,
然后浏览器重新绘制了页面。
最后执行了document.querySelector(".box").className = "box changing";,
给.box添加changing类名，将动画效果再次添加到元素上。
综上，就实现了再次触发动画的效果。
1.2 解决方法二
来自实践所得。
// JSfunction play() { document.querySelector(".box").className = "box";
setTimeout(() => { document.querySelector(".box").className = "box changing";
},0);
}document.querySelector("#runButton").addEventListener("click", play, false);原理还不清楚，可能跟异步代码和浏览器的渲染规则有关系吧，日后查清楚再来更新。
2.防止多次重复触发动画
有时候不希望每次点击都让动画从头开始，而是等动画结束之后才能再次触发。
2.1 方法一
当希望再次触发动画时，判断有没有应用动画的类名，没有的话，才再次触发。
// JSfunction play() { if($(".box").hasClass('changing')){return;}
setTimeout(() => {
$(".box").addClass = "changing";
},0);
}document.querySelector("#runButton").addEventListener("click", play, false);2.2 方法二
前面的方法是先除去含有动画效果的类名，然后再添加类名以触发动画。
还可以先添加类名触发动画，等动画结束后再除去带有动画效果类名。
// JSfunction play() { if($(".box").hasClass('changing')){return;}
$(".box").addClass = "changing";
setTimeout(() => {
$(".box").removeClass = "changing";
},1000);
}document.querySelector("#runButton").addEventListener("click", play, false);
作者：胡不归vac
链接：https://www.jianshu.com/p/48f3b8344174
