無法設置CSS3過渡以允許一秒高光

我正在嘗試拋棄基於setTimeout的JavaScript來支持一秒鐘高光的CSS過渡。我不想立即改變背景顏色，或者甚至在兩種背景顏色之間淡化，我想先切換爲黃色，然後淡入正確的顏色。無法設置CSS3過渡以允許一秒高光

我認爲它應該工作的方式是將類設置爲具有黃色背景的類，然後將其更改爲具有過渡屬性和新顏色的類。這只是淡化到最終的顏色，而不是從黃色開始。我不認爲我可以將這個轉換附加到元素上，而不管這個類是什麼，或者這兩個類的變化會重疊並且同時運行它們的動畫。

很明顯，我需要以不同的方式來構建事物來實現這一點。當附加到添加和刪除的類時，我不能掌握實際發生轉換時的基本知識。

<style> 
.highlight { background-color: yellow; } 
.selected { background-color: black; -moz-transition: background-color 2s linear; } 
</style> 

<div id="samp" onclick="flash();">SAMPLE</div> 

<script> 
function flash() { 
    document.getElementById("samp").className = "highlight"; 
    document.getElementById("samp").className = "selected"; 
} 
</script>

來源

2011-05-12 Lucent

在諮詢了IRC之後，確定了造成這種情況的根本原因是瀏覽器在嘗試重繪/重繪之前等待腳本塊完成。就好像highlight類從未應用過。出於這個原因，如果超時增加，Lea的解決方案實際上也可以工作。確切的超時工作必須取決於重繪間隔。

我搜索了強制重繪的方法，並遇到了一個Opera blog post warning against measuring as it causes a repaint。簡單地在className這兩行之間插入var x = document.getElementById("samp").offsetWidth;使其根據需要從黃色開始轉換。

我覺得有趣的是，Webkit和Gecko完成的優化 - 等待重繪直到腳本塊完成 - 當採取的操作大多是無狀態的時候，就像CSS一樣，這是合理的。也就是說，無論做出多少更改，瀏覽器都可以丟棄以前的所有樣式，並且在應用最後一個樣式時是正確的。然而，隨着轉換，CSS變得有狀態，並且這種優化實際上產生與關閉時不同的結果。

來源

2011-05-13 03:09:16 Lucent

你需要切換類超時：

function flash() { 
    document.getElementById("samp").className = "highlight"; 

    setTimeout(function(){ 
     document.getElementById("samp").className = "selected"; 
    }, 10); 
}

也，這是offtopic，但一個很好的做法是爲了避免變量冗餘DOM查詢和緩存元素：

function flash() { 
    var samp = document.getElementById('samp'); 

    samp.className = "highlight"; 

    setTimeout(function(){ 
     samp.className = "selected"; 
    }, 10); 
}

來源

2011-05-12 13:23:35

不起作用。像我的例子一樣直接從白色變成藍色。另外，沒有理由setTimeout應該是必要的。 – Lucent 2011-05-12 14:01:22

如果您嘗試在'.highlight'而不是'.selected'上定義轉換？ – 2011-05-13 10:36:10

無法設置CSS3過渡以允許一秒高光

回答

相關問題