javascript - 内容更改时的瞬时文本突出显示

Question

在我的应用程序中，有一个这样的元素:

<label id="label" class="control-label">Label (Foo)</label>

由于某些响应用户输入的 javascript 代码，部分元素文本可能会更改:

<label id="label" class="control-label">Label (Bar)</label>

负责此更改的 javascript 类似于:

label.text('Label (Bar)');

为了向用户强调这一变化，我想暂时突出显示标签的变化部分。短时间后，这种效果应该会消失。请注意，此效果类似于 DOM 更改时 Chromium/Chrome 浏览器的开发人员工具的元素 View 的效果。

如何使用 html、css、jquery、javascript 和/或 bootstrap 实现这种效果？

编辑:至少，当内容改变时，整个标签可以高亮显示。

Answer 1

$('#mybtn').click(function() {
  $('#label').html('Label (BAR)');
  $('#label').addClass('highlight');
});

@keyframes highlight {
  0% {
    background: red;
  }
  100% {
    background: none;
  }
}

.highlight {
  animation: highlight 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="label" class="control-label">Label (Foo)</label>
<button id="mybtn">
Click Me
</button>

检查 fiddle希望这会有所帮助。