内容更改时的瞬时文本突出显示答案

【问题标题】：Momentary Text Highlighting on Content Change内容更改时的瞬时文本突出显示
【发布时间】：2019-01-25 14:57:26
【问题描述】：

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

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

由于某些响应用户输入的 javascript 代码，部分元素文本可能会发生变化：

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

负责此更改的 javascript 类似于：

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

为了向用户强调此更改，我希望标签的更改部分能够暂时突出显示。一段时间后，这种效果应该会消失。请注意，这种效果类似于 Chromium/Chrome 浏览器开发者工具的 Elements 视图在 DOM 发生变化时的效果。

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

编辑：至少，整个标签可以在其内容更改时突出显示。

【问题讨论】：

您自己有没有尝试过实现这样的效果？请发布您尝试过的代码。

标签： javascript jquery html css twitter-bootstrap

【解决方案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 希望这会有所帮助。

【讨论】：