js缓慢收缩下拉菜单

// 示例：使用事件委托来优化事件处理
document.addEventListener('click', function(event) {
    const dropdown = document.querySelector('.dropdown');
    if (!dropdown.contains(event.target)) {
        dropdown.classList.remove('show');
    }
});

/* 示例：使用CSS过渡效果 */
.dropdown-menu {
    display: none;
    transition: all 0.3s ease-in-out;
}

.dropdown.show .dropdown-menu {
    display: block;
}

/* 示例：使用transform来优化动画 */
.dropdown-menu {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.dropdown.show .dropdown-menu {
    opacity: 1;
    transform: translateY(0);
}

function animateDropdown() {
    // 动画逻辑
    requestAnimationFrame(animateDropdown);
}

// 启动动画
requestAnimationFrame(animateDropdown);