CSS动画之animation再次触发与防止多次触发

您所在的位置：网站首页 › js点击触发动画 › CSS动画之animation再次触发与防止多次触发

CSS动画之animation再次触发与防止多次触发

2024-07-14 18:54| 来源: 网络整理| 查看: 265

上一篇博客记录了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'; });

因为没有实现先除去动画的效果，然后让文档重新计算样式，最后将动画再次添加到元素上的效果。

1.1 解决方法一

来自MDN

// JS function play() { document.querySelector(".box").className = "box"; window.requestAnimationFrame(function(time) { window.requestAnimationFrame(function(time) { document.querySelector(".box").className = "box changing"; }); }); } document.querySelector("#runButton").addEventListener("click", play, false);

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 解决方法二

来自实践所得。

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

缺点是需要确定动画的时间，而且添加了异步代码，好像这样是不好的。

【本文地址】

CSS动画之animation再次触发与防止多次触发

CSS动画之animation再次触发与防止多次触发

今日新闻

推荐新闻