Question

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

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

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

我尝试使用：

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：

将类添加到列表中新添加的元素
```
d.className = "added";
```

仅将动画应用于没有该类的div

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

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

这里是一个基于您的代码的演示：

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

如何确保动画第一次在整个列表上播放

只需将其应用于整个列表

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>

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

2 个答案: