CSS与JavaScript实现元素滑入后无法滑出的问题求助

我给一张图片添加了onclick函数使其充当按钮，随后创建了一个外层容器div，内部包含一个内层容器div，该内层容器中包含多个带有社交图标的div，初始行内样式为display:none。我为内层容器div添加了CSS动画，配合JavaScript代码实现点击按钮时显示/隐藏元素。第一次点击时，CSS动画正常运行，社交图标从左侧滑入视野；但第二次点击时，社交图标直接被设置为display:none，无动画直接消失。我尝试为内层容器添加第二个类并应用反向动画（调整margin实现滑出），但未能成功。

核心问题是**display:none会直接从DOM流中移除元素，无法触发任何过渡或动画效果**。我们可以通过transform+transition（或双向动画）配合类切换来实现平滑的滑入滑出，避免直接操作display属性。

修改后的完整代码 #

HTML

<button onclick="myFunction()">Click Me</button>

<div id="hidden-social-container">
    <div id="hidden-social" class="hidden">
        <span>A</span>
        <span>B</span>
        <span>C</span>
        <span>D</span>
        <span>E</span>
    </div>
</div>

CSS

#hidden-social-container {
    width: 200px;
    height: 32px;
    position: relative;
    top: 20px;
    left: 40px;
    overflow: hidden;
}

#hidden-social {
    width: 145px;
    transition: transform 1s ease; /* 用过渡实现平滑位移 */
}

#hidden-social.show {
    transform: translateX(0);
}

#hidden-social.hidden {
    transform: translateX(-100%);
}

/* 若偏好使用动画而非过渡，可替换为以下代码 */
/*
#hidden-social.show {
    animation: slide-in 1s forwards;
}

#hidden-social.hidden {
    animation: slide-out 1s forwards;
}

@keyframes slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes slide-out {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
*/

.social-icon-2 {
    width: 25px;
}

.social-icon-p2 {
    width: 15px;
}

JavaScript

function myFunction() {
    const x = document.getElementById("hidden-social");
    x.classList.toggle("show");
    x.classList.toggle("hidden");
    
    // 若使用动画版本，可监听动画结束事件做后续处理（可选）
    // if (!x.classList.contains('show')) {
    //   x.addEventListener('animationend', () => {
    //     // 动画结束后可执行额外逻辑，无需强制设置display:none
    //   }, { once: true });
    // }
}

关键修改说明 #

1. 移除行内display:none，改用CSS类通过transform: translateX()控制元素的显示状态，利用外层容器的overflow:hidden隐藏滑出视野的元素。
2. 使用classList.toggle()替代直接修改行内样式，逻辑更清晰，便于维护。
3. 优先选择transition实现平滑位移，比动画更轻量化；若需更复杂的动画效果，可定义双向动画并通过类切换触发。

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