void element.offsetWidth;
是一行看似无用的代码,但在CSS动画中是必需的。这行代码是做什么的,为什么需要它呢?
如果将整行注释掉,动画会执行一次但不会重复。(如果删除void
,它仍然有效)。
完整的代码/演示在此处可用;我试着复制下面的相关摘录:
script.js:
beatIndicator = document.getElementById("beatIndicator"),
...
// Happens every time a beat starts:
beatIndicator.classList.remove("anim");
void beatIndicator.offsetWidth; // Why is this line needed?
beatIndicator.classList.add("anim");
example-advanced.html
<span style="display: none;" id="beatIndicator" class="pulse"></span>
<style>
.pulse {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f44336;
z-index: 3;
left: -18px;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
@keyframes pulse-anim {
from {
box-shadow: rgba(244, 67, 54, 1) 0px 0px 0px 0px;
}
to {
box-shadow: rgba(244, 67, 54, 0) 0px 0px 0px 14px;
}
}
.pulse.anim {
animation: pulse-anim;
}
</style>
offsetWidth
来测试您的答案,它与使用void
返回undefined
一样有效。仅进行测量就足以确保动画重置到起点。 - myNewAccount