html animation怎么多次触发,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;

}

下面的代码是无效的。// JSdocument.querySelector('#runButton').addEventListener('click',function(){  document.querySelector('.box').className = 'box';  document.querySelector('.box').className = 'box changing';

});

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