如何在不使用setTimeout的情况下挂接正在进行的过渡？

Question

当过渡（比如说）完成60％时，是否有办法做某事？该API很容易用作过渡结束侦听器，但仅适用于任何数量的过渡进行。

伪代码：

node.addEventListener('transitionat', () => alert('foo'), {progress: 60})

当过渡持续时间设置为1s时，应用将在600毫秒后执行alert('foo')。

实现此目标的当前最佳解决方案是什么？

_{注意：不能使用setTimeout}

---

目前我的最佳解决方案/黑客是仅使用“未使用的”过渡属性：

let callBackStamp = 0;
let transitionStamp = 0;

mainz.addEventListener('transitionend', event => {
  if (event.propertyName !== 'transform') {
    callBackStamp = Date.now();
    console.log('simulate callback at ', callBackStamp);
  } else {
    transitionStamp = Date.now();
    console.log('finished with delay ', transitionStamp - callBackStamp);
  }
})

body {
  font-family: Arial, Helvetica, sans-serif;
}

div.something {
  background-color: rgba(255, 255, 255, 0.9);
  transition-property: transform, background-color;
  transition-duration: 1s, 600ms;
  transition-delay: 200ms;
}

div.something:hover {
  background-color: rgba(255, 255, 255, 1.0);
  transform: translate(10px, 5px);
  z-index: 2;
}

div.square {
  width: 100px;
  height: 100px;
  border: solid;
  padding: 5px;
}

<div id="mainz" class="square something">Hover plz</div>

但是，这当然很脏，而且很难找到可用于过渡的，可操纵的属性，以便它触发过渡，但以用户无法识别的方式，并且对于UI也不是必需的（如果您实际上确实已经配置/维护了背景颜色，就不能只使用背景颜色。