В слайдере на чистом js внутри EventListener animationend ничего не происходит

хочу написать слайдер на чистом js, но возникла проблема, в данном куске кода:

function hideItem(direction) {
    isEnabled = false;
    for (let value of currentItem) {
        items[value].classList.add(direction);
        items[value].addEventListener('animationend', function () {
            this.classList.remove('active', direction);
        });
    }
}

function showItem(direction) {
    for (let value of currentItem) {
        items[value].classList.add('next', direction);
        items[value].addEventListener('animationend', function () {
            this.classList.remove('next', direction);
            this.classList.add('active');
            isEnabled = true;
        });
    }
}

Все, что находится в EventListener animationend не исполняется, то-есть классы не добавляются и не удаляются, хотя выше него добавление класса next и active работает, не подскажите, почему так происходит?