使用Knockout JS和CSS在类bg颜色之间淡入淡出

Question

我有一个名为已更改的viewmodel可观察值，如果相关行已更改，则会在回发后设置该值。然后我设置一个计时器，在这么多秒后将已更改设置回false。一切正常，所以当设置更改时行变为绿色，然后返回默认值。

但我希望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绑定，而是create a custom handler使用jQuery animate更改经过一段时间后的颜色。