如何在另一个 transitionend 事件触发后触发 transionend 事件？

Question

我的第二个 transitionend 根本没有被触发，我的第一个 transitionend 被提前触发了。

我想让一个 div 变换到窗口的左侧，完成后不显示并将其变换到窗口的右侧。完成后我想将显示设置为内联块并将其转换回窗口。

但是当我尝试它时，第一个 transitionend 被提前触发而第二个根本没有被触发。

const nameBox = document.getElementById("nameBox");
    nameBox.style.transform = "translateX(-100%)";
    nameBox.addEventListener("transitionend", (event) => {
            nameBox.style.transform = "translateX(100%)";
            nameBox.style.display = "none";
            nameBox.addEventListener("transitionend", (event) => {
                    nameBox.style.display = "inline-block";
                    nameBox.style.transform = "translateX(0%)";
             });
    });

#nameBox{
    margin: 5px;
    width: 95%;
    display: inline-block;
    text-align: center;
    background: #231123;
    color: white; 
    font-size: 20px;
    white-space: nowrap;
    transition: 1.5s ease-in-out;
}