Question

使用keyframe-hack，我们可以在DOM元素开始匹配 css选择器时触发事件。

为此，我们应用css为特定选择器添加关键帧动画。接下来，我们为animationstart事件注册一个监听器。在回调中，我们检查正确的动画名称，如果这是我们的关键帧动画，则触发我们的实际事件。

以下代码段显示了此策略：

document.body.addEventListener('animationstart', event => {
if(event.animationName === 'ButtonAnimation') {
  console.log('start hovering Button', event.target.innerHTML)
}
}, false)

@keyframes ButtonAnimation {
from { outline-color: #fff; } to { outline-color: #000; }
}

button:hover {
  animation-duration: 0.001s;
  animation-name: ButtonAnimation !important;
}

<div>
<button>Hover</button>
<button>Me</button>
</div>

现在，此策略适用于开始匹配css选择器。

但是，我们还希望在元素停止匹配选择器时触发事件。

最后，目标是这样的：

onStopMatching('button:hover', elem => {
  console.log('stopped matching', elem))
}

有关如何实现此行为的任何想法？

谢谢！

失败的尝试：

（但遗憾的是Chrome不支持cancelanimation事件，因此，这对我们来说无处可选。）

元素停止匹配css选择器

0 个答案: