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

Posted 2023-02-18

【中文标题】内容更改时的瞬时文本突出显示

【英文标题】：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 实现这种效果？

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

【问题讨论】：

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

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