jquery - 使用带有 CSS 的 Knockout JS 在类 bg 颜色之间淡入淡出

Question

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

但我希望 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 绑定(bind)，而是使用 create a custom handler使用 jQuery animate在一段时间过去后改变颜色。