在我的应用程序中,我每秒创建一个新元素。它们应该在创建时淡入。这是我的做法:
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()
的延迟?
最佳答案
你可以使用 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;
}
关于javascript - 淡入新元素的可靠方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56718813/