谁能告诉我为什么这不起作用？代码中的“第一个动画”有效，但之后的无效。

这里是js代码：

function slideup(){
        const slideArrowContainer = document.querySelector('.slide-arrow-container');
        const contractArrowContainer = document.querySelector('.contract-arrow-container')
        const SwipeRight = document.querySelector('.swipe-up')
        if(slideArrowContainer != null){
            console.log('not null')
            //Second animation after first animation ends below:
            slideArrowContainer.addEventListener('animationend',() => {
                contractArrowContainer.classList.toggle('contract-arrow-container-display');
                console.log('animation ended')
                console.log(contractArrowContainer.classList)
            })
        }
        console.log('is null')
        if(contractArrowContainer != null){
            //Third animation after second animation ends below: 
            contractArrowContainer.addEventListener('animationend',() => {
                SwipeRight.classList.toggle('.swipe-up-animation')
                console.log('animation ended')
            })
        }
        console.log('end')
    }

    function slideDown(){}

    slideup()

    slideDown()

类的 CSS 代码非常简单，但是如果您想看，我很乐意更新问题。

此外，我正在使用 react，所以我不确定它是否与 react 的工作方式有关。我正在尝试这样做，因为我没有时间和精力去学习反应过渡组，这看起来很简单……但不工作，哈哈……