javascript - 淡入新元素的可靠方法

Question

在我的应用程序中，我每秒创建一个新元素。它们应该在创建时淡入。这是我的做法:

window.setInterval(() => {
    const element = document.createElement('div');
    element.classList.add('dot', 'hidden');
    document.getElementById('content').appendChild(element);
    element.classList.remove('hidden');
}, 1000);

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .7);
    margin: 0 5px 5px 0;
    transition: opacity 1s;
}

.hidden {
    opacity: 0;
}

我原以为这会让过渡工作成功​​，但事实并非如此。我还尝试在延迟后删除 hidden 类，如下所示:

setTimeout(() => element.classList.remove('hidden'), 100);

这很有趣，因为它只有在延迟足够长的情况下才有效。如果我将它设置为 10 毫秒，一些点会淡入，而另一些会立即出现。

有没有更好、更简单、更可靠的方法让它工作，而不用猜测 setTimeout() 的延迟？

Answer 1

你可以使用 CSS animations如果您想要的是简单的淡入效果，请避免使用 JavaScript。这只会在 DOM 节点被绘制到屏幕上时运行。如果您需要对动画进行更高级的控制，则可以使用 JS。

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.dot {
   display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .7);
    margin: 0 5px 5px 0;
    animation: 1s linear fadein;
 }