我正在使用JavaScript对<span>标记（在CSS中已经设置为青色）进行样式设置，使其在单击时变为绿色，然后再返回青色。在CSS中，其transition-duration属性设置为100ms。我不想让Javascript在color变成绿色之前把它设置回青色，所以很自然地，我使用了setTimeout()来延迟转换所需的时间（100ms），正如你在下面的代码中看到的，我在看了关于这个的其他问题后做了一点改进，但它们似乎仍然不是最有效的。

验证码：

// Script is here and not in src in order to make it easier for you to copy and test run.
document.getElementById("text").addEventListener("click", function() {
    document.getElementById("text").style.color = "Green";
    setTimeout(function() {document.getElementById("text").style.color = "Cyan";}, 100); // Timeout time same as transition-duration.
});

#info-display{
    user-select: none;
    text-align: center;
    font: small-caps bold 5vw 'Courier New', Courier, monospace;
}
#text {
    color: Cyan;
    background-color: Black;
    padding: 0.1vw 1vw 0.1vw;
    border-radius: 25% 25% 15% 15%;
    transition-duration: 100ms;
}

<h1 id="info-display"><span id="text">~ Words to Click. ~</span></h1>

我需要知道是否有比这更好的方法; JavaScript可以通过某种方式检测CSS transition何时完成，这样就不必在两个地方更改transition时间的繁琐工作。
如果有人能帮我找到一个方法，那就太棒了！😃
谢谢！
P.S.请不要费心去问，“为什么是<h1>标签？“或者类似的东西，这就是我在整个程序中使用的东西。