如何实现点击按钮后对应动态Door元素5秒后依次消失？

点击对应按钮后，让door1、door2、door3等元素依次在5秒后消失，需在toggleDoor函数中添加实现代码。此前尝试使用jQuery实现但未成功，现附上相关HTML及JS代码，寻求可行解决方案：

<div class="backDoor">
    <div class="door5" id="door5">
        <div class="door4" id="door4">
            <div class="door3" id="door3">
                <div class="door2" id="door2">
                    <div class="door1" id="door1">
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div>
    <input type="text" id="parola"></input>
  
    <button id="button1" onclick="toggleDoor(1)">
        Apri prima porta
    </button>
    <button id="button2" onclick="toggleDoor(2)">
        Apri seconda porta
    </button>
    <button id="button3" onclick="toggleDoor(3)">
        Apri terza porta
    </button>
    <button id="button4" onclick="toggleDoor(4)">
        Apri quarta porta
    </button>
    <button id="button5" onclick="toggleDoor(5)">
        Apri quinta porta
    </button>
    <script>
        
      function toggleDoor(door) {
    // Find the proper door
    element = document.querySelector('.door' + door); // With constructed reference

    
    if (element) { // does the door exist?
        if (checkParola(door)) { // proper password?
            element.classList.toggle("openDoor");
            // Here I want to make the selected door to dissapear after 5 seconds
    };
};
      };
</script>

使用原生JS的setTimeout函数即可实现5秒后隐藏元素的需求，同时规范变量声明避免全局污染，修改后的toggleDoor函数如下：

function toggleDoor(door) {
    // 用const声明局部变量，避免全局变量泄漏
    const element = document.querySelector('.door' + door);

    if (element) {
        if (checkParola(door)) {
            element.classList.toggle("openDoor");
            // 5秒后执行隐藏逻辑
            setTimeout(() => {
                // 方式1：直接设置display为none，完全隐藏元素
                element.style.display = 'none';
                
                // 方式2：通过CSS类实现平滑消失（推荐）
                // 先在CSS中定义.hiddenDoor类，再取消下面注释
                // element.classList.add('hiddenDoor');
            }, 5000); // 5000毫秒等于5秒
        }
    }
}

额外优化建议 #

• 如果需要平滑消失的过渡效果，可添加以下CSS类：

.hiddenDoor {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

然后在setTimeout中使用element.classList.add('hiddenDoor')替代直接修改style.display，实现渐变消失的动画效果。

• 注意你的门元素是嵌套结构（door1嵌套在door2内，以此类推），隐藏外层门会自动隐藏内层门，若此逻辑不符合需求，可调整DOM结构或单独控制每个门的显示状态。
• 确保checkParola函数能正确返回布尔值，验证输入的密码是否匹配。

内容的提问来源于stack exchange，提问作者Any