在CSS中使用Knockout JS在類之間淡出顏色

Question

我有一個名爲的視圖模型可觀察值已更改如果問題行已更改，則會在回發後設置該值。然後，我設置了一個定時器，將更改爲經過這麼多秒後重新變爲假。這一切工作正常，所以排當綠色改變設置並返回到默認值後。

但我想bg顏色之間的過渡淡出而不是直接交換。 tr定義如下。

  <tr data-bind="css: { greenBg: changed() == true, dataRowEven: $index() % 2 }" class="dataRow"> 

任何建議將是巨大的。

乾杯 西蒙

Answer 1

如何使用CSS3 transitions提供此功能的用戶最多最新的瀏覽器，讓事情正常降級的舊的瀏覽器？你可以使用CSS這樣的：

tr { 
    background-color: lightgray; 
    -moz-transition: 3s; 
    -webkit-transition: 3s; 
    -o-transition: 3s; 
    transition: 3s; 
} 

tr.dataRowEven { 
    background-color: gray; 
} 

tr.greenBg { 
    background-color: green; 
} 

在this fiddle在操作中查看。

另外，如果您需要提供此功能，舊的瀏覽器爲好，它可能是最好不要使用基本css約束力，但使用jQuery animate改變顏色在一定期限過後create a custom handler。