如何使用 JavaScript 将列表项逐一显示为动画？

Question

我需要为以下列表项设置动画（淡入），使其一一显示。作为right side drawer in this website。

<ul>
    <li class="fade-item">Item 01</li>
    <li class="fade-item">Item 02</li>
    <li class="fade-item">Item 03</li>
    <li class="fade-item">Item 04</li>
    <li class="fade-item">Item 05</li>
</ul>

这是 JavaScript 代码。

function fadeItems() {
    var items = document.getElementsByClassName("fade-item");

    for (var i = 0; i < items.length; i++) {
        setTimeout(function() {
            items[i].classList.add("fadein");
        }, 3000);
    }
}

Css 样式在这里。

.fade-item {
    transition: .2s all ease-in-out;
    opacity: 0;
}

.fade-item .fadein {
    animation: fadeIn 0.9s 1;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

执行该函数时出现以下错误。

Uncaught TypeError: Cannot read property 'classList' of undefined

我需要这个来使用 JavaScript 进行编码。

Answer 1

items[i].className="fade-item fadeIn" 类.

之间有个space

Answer 2

Uncaught TypeError: Cannot read property 'classList' of undefined

因为当您使用 setTimeout(handler, delay) 时，在其他上下文中调用了处理程序。

如果你想一项一项地淡入淡出，你应该为每个项目使用不同的延迟。

如果您想在添加 class fadein 后 淡入项目 ，您的 css 应该是

.fade-item {
    transition: .2s all ease-in-out;
    opacity: 0;
}

.fadein {
    animation: fadeIn 0.9s 1;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

演示： https://jsfiddle.net/dkojpcpt/

如何使用 JavaScript 将列表项逐一显示为动画？

How can I animate list items to be apeared one by one with JavaScript?

javascript

css-animations

listitem