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。

ℕ⁺ (suc zero)

Answer 2

您的原始问题很有意义，因为您要在setTimeout块的同一函数中添加隐藏的类并将其删除。请记住，只有在函数完成执行后，浏览器才有机会重新渲染。这意味着在添加hidden类的行中根本没有用，因为稍后会在函数中（在浏览器可以进行渲染之前）立即将其删除。

我建议插入您的DOM元素，然后使用setTimeout或requestAnimationFrame对其进行重置。同样，由于setInterval和setTimeout的时序不完全可靠，因此使用一个元素的transitionend事件触发下一个元素的添加可能是有意义的。

(function() {
  const container = document.getElementById('container');
  let count = 0;

  function addElement() {
    const div = document.createElement('div');
    div.innerHTML = 'item ' + ++count
    container.append(div);
    div.classList.add('item')
    div.addEventListener('transitionend', addElement)
    setTimeout(function() {
      div.classList.add('show')
    }, 0)
  }

  addElement()

})()

div {}

div.item {
  opacity: 0;
  transition: opacity 1s;
}

div.item.show {
  opacity: 1;
}

<hr>

<div id="container">

</div>

Answer 3

Css transition在隐藏事物时效果最好。

这是仅使用JavaScript的解决方案。

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

// This will inc opacity by 0.1 each 100ms 
function fade(item, i){
i += 0.1;
item.style.opacity = i;
if (i< 1)
setTimeout(()=> fade(item,i), 100);
}

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



#content {
background:black;
}

<div id="content"></div>

淡入新元素的可靠方法

3 个答案: