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

Question

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

但我希望 bg 颜色之间的过渡淡化而不是直接交换。tr 定义如下。

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

任何建议都会很棒。

干杯西蒙

Answer 1

使用 CSS3过渡为使用最新浏览器的用户提供此功能如何，让旧浏览器优雅地降级？你可以像这样使用 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;
}

在这个小提琴中看到这个。

或者，如果您也需要为旧版浏览器提供此功能，最好不要使用基本css绑定，而是创建一个自定义处理程序，使用jQueryanimate在经过一段时间后更改颜色。