如何逐个淡入动态<li>元素？

我有一个函数，用于在循环数组的页面上显示我的数据。我被困在尝试一次显示一个 li 元素时，当前代码将这些元素显示为一个块。

function displayData() { 
const allLi = document.querySelector('article > ul');
allLi.innerHTML = '';
 pageSnippits.forEach(function(page) {
     const searchUlOut = document.querySelector('article > ul');
     const searchLiOut = document.createElement('li');
     searchLiOut.innerHTML = '<h3>' + page.title + '</h3>' + '<p>' + page.extract + '</p>';
     searchUlOut.appendChild(searchLiOut);
     setTimeout(function() {
         searchLiOut.classList.add('animated', 'fadeInUp');
     }, 10);
});

}

谢谢！

> 首先，setInterval需要以毫秒为单位的时间。 10 毫秒太短，视觉效果通常可见。

基本上问题是当你使用 forEach 遍历数组时，每次代码遇到setInterval时，它都会设置计时器并继续代码执行。循环甚至在第一个计时器触发之前完成，并且所有设置的计时器同时触发。有很多链接讨论Javascript计时器是如何工作的。例如，请参阅此处。

我的解决方案是使用 setInterval 而不是 setTimeOut .我创建了一个代码片段来给你一些想法。看看它是否有助于解决您的问题。

function displayData() { 
var pageSnippits =['javascript','is','da','best'];
var index=0;
var handle = setInterval(function() {
        var searchUlOut = document.querySelector('article > ul');
        var searchLiOut = document.createElement('li');
        
         searchLiOut.innerHTML = '<h3>' + pageSnippits[index] + '</h3>' + '<p>' + pageSnippits[index] + '</p>';
         searchLiOut.classList.add('w3-animate-opacity');
         searchUlOut.appendChild(searchLiOut);
         
         index++;
         if(index>=pageSnippits.length) clearInterval(handle);
     }, 1000);
}
displayData()

<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<article>
    <ul>
    </ul>
    </article>

点击这里！下载 Wow.js 和 animated.css<</p>

div class="one_answers">

这里的问题是您将它们设置为在循环后 10 秒内全部出现。我建议也许添加一个在循环中递增的计数变量，然后：

setTimeout(function() {
    searchLiOut.classList.add('animated', 'fadeInUp');
}, 10000 * count);

或类似的东西。

相关内容

最新更新

热门标签：