时间戳

首页 > 解决方案 > 淡入新元素的可靠方法

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

问题描述

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

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()？

标签： javascriptcssfadein

解决方案

如果你想要一个简单的淡入，你可以使用CSS 动画并避免使用 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;
 }

推荐阅读