如何仅在最后 child 上防止动画

Question

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

此列表有一个 fade-in 动画，这样用户可以看到列表何时加载（它从服务器获取数据）。

添加新行时，我不希望有 fade-in 动画。

我尝试使用：

div:last-child {
  animation: none;
}

这仅在第一次添加新 div 时有效。对于以下所有添加，动画都会应用。

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

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 }
}

<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</main>
<button type="button" onclick="addRow('hello')">Add row</button>

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

Answer 1

一个选项稍微改变了 JS 和 CSS:

在列表中新增一个class元素
```
d.className = "added";
```

仅将动画应用于没有 class

的 div

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

最初的 div 没有那个 class，所以它们会在页面加载时动画化，但是后来添加的 div（带有 class你指定的名字）没有任何动画。

这里有一个演示如何基于您的代码：

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

body {
  background: #222;
}

main > div {
  background: #444;
  border: 1px solid green;  
}

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

div.added:last-child {
  background: #999;
}

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

<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</main>
<button type="button" onclick="addRow('hello')">Add row</button>

Answer 2

How do I ensure the animation runs on the whole list the first time

只需将其应用于整个列表

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;
}
main {
  animation: fade-in 1s;
}

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

<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</main>
<button type="button" onclick="addRow('hello')">Add row</button>

如何仅在最后 child 上防止动画

How to prevent animation only on last child

html

css

css-selectors

opacity

css-animations