如何仅在最后一个孩子上防止动画

Question

我的div列表越来越多。用户可以单击按钮以将新的div追加到底部。

该列表具有淡入淡出的动画，以便用户可以看到列表何时加载（它从服务器获取数据）。

当添加新行时，我不想使用淡入动画。

我尝试使用：

div:last-child {
  animation: none;
}

这仅在第一次添加新的div时有效。在以下所有附加内容上，无论如何都会应用动画。

请在下面查看此演示以了解我的意思：

div:last-child {
  animation: none;
}

function addRow(text) {
  var d = document.createElement('div');
  d.innerHTML = text;
  var root = document.querySelector('main');
  root.appendChild(d);
}

body {
  background: #222;
}

main > div {
  background: #444;
  border: 1px solid green;
  animation: fade-in 1s;
}

div:last-child {
  background: #999;
  animation: none;
}

@keyframes fade-in {
  from { opacity: 0 }
  to { opacity: 1 }
}

如何确保动画第一次在整个列表上运行，但在以后的添加中阻止它呢？

Answer 1

一个选项稍微改变 JS 和 CSS：

1. 为列表中新添加的元素添加一个类

   d.className = "added";
   

2. 仅将动画应用于div没有该类的对象

   main > div:not(.added) {
     animation: fade-in 1s;
   }
   

初始的div没有该类，因此当页面加载时它们将被动画化，但是div稍后添加的（使用您指定的类名）没有任何动画。

这是一个关于如何基于您的代码的演示：

d.className = "added";

main > div:not(.added) {
  animation: fade-in 1s;
}

function addRow(text) {
  var d = document.createElement('div');
  d.className = "added";
  d.innerHTML = text;
  var root = document.querySelector('main');
  root.appendChild(d);
}