如何通过Toggle操作维持元素滑动后的固定位置？

你当前的问题出在CSS动画的默认行为上：动画执行完毕后，元素会自动回到初始样式，不会保留动画最后一帧的状态。要实现「滑动后停留、再次点击收回」的效果，有两种简洁的解决方案，推荐优先使用过渡（transition）方案，更适配切换场景。

方案一：使用CSS Transition（推荐） #

这种方式通过切换类来改变元素的transform属性，配合默认添加的过渡效果，实现双向平滑动画，且状态切换逻辑更简单。

修改后的CSS #

/* 给目标元素默认添加过渡属性，确保状态切换时有平滑动画 */
#IT {
    transition: transform 2s ease-in-out;
}

/* 左滑后的状态类，直接定义最终位置 */
.slideLeft {
    transform: translate(-50%, 0);
}

修改后的JS #

const ITBtn = document.querySelector(".tech img");
const ITSolutions = document.getElementById("IT");

ITBtn.addEventListener("click", () => {
    // 切换左滑状态类，添加时左滑到位，移除时收回
    ITSolutions.classList.toggle("slideLeft");
    // 同步处理描述弹窗的显示/隐藏，建议也用toggle保持逻辑一致
    modalLeft.classList.toggle("showDescrip");
});

方案二：使用CSS Animation + fill-mode #

如果坚持用动画实现，需要给动画添加animation-fill-mode: forwards让元素停在最后一帧，同时添加反向动画实现收回效果。

修改后的CSS #

.slideLeft {
    animation: slideLeft 2s 1 ease-in-out forwards;
}

.slideRight {
    animation: slideRight 2s 1 ease-in-out forwards;
}

@keyframes slideLeft {
    0% { transform: translate(0%, 0); }
    100% { transform: translate(-50%, 0); }
}

@keyframes slideRight {
    0% { transform: translate(-50%, 0); }
    100% { transform: translate(0%, 0); }
}

修改后的JS #

const ITBtn = document.querySelector(".tech img");
const ITSolutions = document.getElementById("IT");

ITBtn.addEventListener("click", () => {
    const isSlid = ITSolutions.classList.contains("slideLeft");
    // 根据当前状态切换动画类
    if (isSlid) {
        ITSolutions.classList.remove("slideLeft");
        ITSolutions.classList.add("slideRight");
    } else {
        ITSolutions.classList.remove("slideRight");
        ITSolutions.classList.add("slideLeft");
    }
    modalLeft.classList.toggle("showDescrip");
});

关键说明 #

• 方案一的transition更适合这种「切换状态」的场景，无需额外管理多个动画类，逻辑更简洁。
• 方案二的animation方式需要维护两个动画方向，适合更复杂的帧动画场景，但状态切换逻辑稍繁琐。

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