Как я могу анимировать элементы списка, которые будут отображаться один за другим с помощью JavaScript?

Question

Мне нужно анимировать (постепенно добавлять) следующие элементы списка, чтобы они появлялись один за другим.Как правая сторона ящика на этом сайте .

<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: Невозможно прочитать свойство 'classList' из неопределенного

Мне нужно это для кодирования с использованием JavaScript.

Answer 1

Uncaught TypeError: Невозможно прочитать свойство 'classList' из неопределенного

, поскольку при использовании setTimeout(handler, delay) обработчик вызывается в другом контексте.

Если выесли вы хотите постепенно добавлять элементы по одному , вы должны использовать различную задержку для каждого элемента.

Если вы хотите добавлять элементы после добавления класса 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/

Answer 2

items[i].className="fade-item fadeIn" Между классами есть пробел.