修改

Question

我有一个实时的提要，每隔几秒就会带来一些东西。我想突出显示新输入的信息，以便监控Feed的人可以看到更改的内容。

现在，调用动画时每个元素都会闪烁。如何使它只显示最后插入的元素？

必须使用纯javascript而不使用插件。

＆＃13;

var doc = document.getElementById('results');

function next(i) {
  setTimeout(function() {
    doc.innerHTML = '<p>Hi ' + i + '<p>' + doc.innerHTML;
    next(++i);
  }, 1000);
}
next(1);

＆＃13;

@keyframes highlight {
  0% {
    background: red
  }
  100% {
    background: none;
  }
}

p {
  animation: highlight 1s;
}

＆＃13;

<div id="results">

</div>

＆＃13;

修改

我可以使用第一个孩子，但如果我有批量更新，则不会选择所有这些。

＆＃13;

var doc = document.getElementById('results');

function next(i) {
  setTimeout(function() {
    doc.innerHTML = '<p>Hi1 ' + i + '<p>'+'<p>Hs2 ' + i + '<p>' + doc.innerHTML;
    next(++i);
  }, 1000);
}
next(1);

＆＃13;

@keyframes highlight {
  0% {
    background: red
  }
  100% {
    background: none;
  }
}

p:first-child {
  animation: highlight 1s;
}

＆＃13;

<div id="results">

</div>

＆＃13;

Answer 1

我不得不问，你是否故意使用innerHtml？这非常低效（参考this post）。您最好创建DOM元素并将它们附加到容器中。这也可以让你有一个更通用的解决方案。

它还允许您使用选择器（如类）作为突出显示，批量更新将继续有效。

JSFiddle

我确实将其更改为仅运行10次：

HTML

<div id="results">
</div>

CSS

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

.child {
  animation: highlight 1s;
}

JS

var doc = document.getElementById('results');

function next(i) {
    if(i < 10) {
  setTimeout(function() {
    var div = document.createElement("div");
    div.className = "child";
    div.textContent = "Hi " + i;
    doc.insertBefore(div, doc.firstChild);
    next(++i);
  }, 1000);
  }
}
next(1);

Answer 2

使用first-of-type伪选择器。

修改：如果要批量插入和闪存，最简单的方法是将段落包含在div中，并使用first-of-type选择器在div而不是p。

＆＃13;

var doc = document.getElementById('results');

function next(i) {
  setTimeout(function() {
    doc.innerHTML = '<div class="inserted"><p>Hi1 ' + i + '<p>'+'<p>Hs2 ' + i + '<p></div>' + doc.innerHTML;
    next(++i);
  }, 1000);
}
next(1);

＆＃13;

@keyframes highlight {
  0% {
    background: red
  }
  100% {
    background: none;
  }
}

.inserted:first-of-type {
  animation: highlight 1s;
}

＆＃13;

<div id="results">

</div>

＆＃13;

Answer 3

如果最后一个元素始终位于CSS内，请使用#results伪选择器。

p:first-child {
    animation: highlight 1s;
}

小提琴：https://jsfiddle.net/uz2weL3z/

如果您想始终定位上次插入，请使用JavaScript：

setTimeout(function() {
    doc.innerHTML = '<p class="last">Hi ' + i + '<p>' + doc.innerHTML;
    setTimeout(function() {
        for(var j=0; j<els.length; j++) {
            els[j].className = "";
        }
    }, 1000);

    next(++i);
}, 1000);

1秒的超时，因为你的动画是1秒

小提琴：https://jsfiddle.net/uz2weL3z/1/

最后插入的元素闪烁颜色

修改

3 个答案: