上一篇博客记录了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';
});
因为没有实现先除去动画的效果,然后让文档重新计算样式,最后将动画再次添加到元素上的效果。