Question

我有一个JavaScript，它根据ajax调用的返回值每几秒更新一次<p> html。我想在<p>上添加一个很好的效果，这样每当<p>内的html发生变化时，<p>的背景会改变一些其他颜色，然后再改回来。

类似于Yahoo Finance页面显示股票当前价格的方式。 - 例如https://finance.yahoo.com/quote/BABA?p=BABA

我如何实现这样的目标，最好是使用CSS？

到目前为止，我已经尝试了以下内容。

<script>
setInterval(function () {
               $("#bid").html(Math.random()).addClass('textColor').delay(1000).removeClass('textColor');
}, 1000);
</script>

和CSS

<style>
        .textColor {
            background-color: coral;
        }

    </style>

和HTML

<p id="bid"></p>

看起来效果太快，因此颜色变化甚至看不到。

https://jsfiddle.net/yn5gq1wd/1/

更新

这是最新的jsfiddle https://jsfiddle.net/yn5gq1wd/19/

Answer 1

创建一个具有要将其更改为的背景颜色的css类。

当段落中的html发生更改时，将css类添加到段落中，然后使用setTimeout（）方法在设置的时间（以毫秒为单位）后删除该类。

以下是使用setTimeout在单击段落时添加和删除类的示例。您只需要将click事件替换为其他事件即可触发代码。

<script>
    $("#bid").click(function() {
        $("#bid").addClass('textColor');

        setTimeout(function() {
            $("#bid").removeClass('textColor');
        }, 1000);
    })
</script>

Answer 2

使用MutationObserver：

＆＃13;

pip list

＆＃13;

const element = document.getElementById('spy-on-me');
setInterval(function () { // This is just to show how it works
  element.innerHTML = element.innerHTML + element.innerHTML;
}, 3000);

const observer = new MutationObserver( function (mutations) {
  mutations.forEach(function (mutation) {
    if (mutation.type = 'childList') {
      element.style.backgroundColor = 'lightgreen';
      setTimeout(function () {
        element.style.backgroundColor = 'white';
      }, 200);
    }
  });
});

const config = { childList: true };

observer.observe(element, config);

＆＃13;

Answer 3

您可以通过3个步骤实现此行为：

<强> 1。创建一个css动画关键帧

@keyframes color-key-frame {
  from {color: black;}
  to {color: red;}
}

<强> 2。创建一个播放动画的css类

.color-animation {
  animation-name: color-key-frame ;
  animation-duration: 1s;
}

第3。在ajax调用完成后，将“color-animation”类添加到所需的HTML节点

   //inside your ajax callBack
    var node = document.getElementById('idOfyourNode');

    //remove prev adjusted class first
    if(node.classList.contains('color-animation')){
      node.classList.remove('color-animation');
    }
    //hack to skip one tick
    setTimout(setTimeout(function(){
      node.classList.add('color-animation');
    },0);

CSS / JavaScript通过在更改文本时更改颜色来突出显示文本

更新

3 个答案: