我用JavaScript來設(shè)計一個& ltspan & gt標(biāo)簽(在CSS中已經(jīng)設(shè)置為青色)在被點擊時變成綠色，然后又變回青色。在CSS中，它的transition-duration屬性被設(shè)置為100ms。我不希望Javascript在完成綠色轉(zhuǎn)換之前將顏色重新設(shè)置為青色，所以很自然地，我使用setTimeout()來延遲轉(zhuǎn)換所需的時間(100毫秒)，正如您在下面的代碼中看到的，在查看了與此相關(guān)的其他問題后，我對它進(jìn)行了一些改進(jìn)，但它們似乎仍然不是最有效的。

代碼:

// 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>

是的，有。看看下面的EventListener:

elem.addEventListener('transitionend', function(){
    //Do something
});