Javascript 使用Knockout.js进行文本更新时闪烁？

鉴于此HTML：

<h2 data-bind="text: title"></h2>

<p data-bind="text: summary"></p>

---

然后以某种方式在该函数中应用flash动画。。。或者别的什么。。。我一直在用谷歌搜索，但只找到了与输入值的改变有关的答案，在我的例子中，根本不需要任何输入。

只是使用了一个自定义绑定，它会先淡出，然后淡入。更改文本框中的值并点击tab

ko.bindingHandlers.flashingtext={
更新：函数（元素、valueAccessor、allBindings）{
//首先获取我们必须获取的最新数据
var value=valueAccessor（）；
var valueUnwrapped=ko.unwrapp（值）；
//现在操作DOM元素
$（元素）.text（值未包装）；
$（元素）.fadeOut（“慢”，函数（）{
$（element.fadeIn（“slow”，function（）{}）；
});
}
};
函数模型（）{
var self=这个；
this.title=ko.observable（“我的标题”）；
}
var mymodel=新模型（）；
$（文档）.ready（函数（）{
ko.应用绑定（mymodel）；
});

更改标题：
您可以使用的一个简单技巧是利用带有

绑定的虚拟元素：

HTML:

让我们看看它是如何工作的（这只是一个简化的示例，因为您没有包含任何其他代码）：

通过将

h2

和

p

元素包装在一个虚拟元素中，我们将

与
绑定，而不是相应元素的内容（
h2
和
p
），而是整个元素本身（即
p
和
h2
标记在注释之间）每当包装虚拟元素绑定到的值发生更改时，获取重新渲染

由于定义的CSS动画会在应用它们的元素被（重新）创建后立即播放，并且由于动画不会重复，因此元素的背景会从您喜欢的某个明亮颜色淡入您选择的最终背景。（请注意，IE可能在
首字母
（请参阅）方面存在问题，只需使用您偏好的颜色即可。）

为方便起见，我在提供的代码中添加了一些随机性。通过单击足够多的按钮，您可以看到，如果
标题
（请原谅，它是一个数字，希望使其尽可能简单）的值小于
0.5
，则
摘要
的值将更改，在这种情况下，背景颜色将设置为动画。如果
title>=0.5
，则不会更改
summary
的值-因此不会重新渲染元素，也不会重放动画（实际上，更改为完全相同的值-我将其包括在内，这样您就可以看到，即使您传递的值恰好相同，也不会通过敲除触发任何更改）

缺点是绑定有点脏，因为使用
$data
作为值绑定文本内容，但是如果您仅在简单的场景中使用它，它可能是一个有用的省时工具。
有一些代码可以在另一个线程中工作。顶部附近有两个不错的代码不需要插件。
<div data-bind="afterValueChanged: myHandler">
    ...

<!-- ko with: title -->
<h2 data-bind="text: $data"></h2>
<!-- /ko -->

<!-- ko with: summary -->
<h2 data-bind="text: $data"></h2>
<!-- /ko -->

<button type="button" data-bind="click: change">
  Change
</button>

function viewModel() {
  var self = this;

  this.title = ko.observable('0');
  this.summary = ko.observable('0');

  this.change = function() {
    self.title(Math.random().toString());

    if (self.title() < 0.5) {
      self.summary(Math.random().toString());
    } else {
      self.summary(self.summary());
    }
  }
};

var vm = new viewModel();

ko.applyBindings(vm);

h2, p {
  animation: bg 1s backwards;
}

@keyframes bg {
  0% {
    background: #00ff40;
  }
  100% {
    background: initial;
  }
}