Flex容器中DIV2滑入、DIV1滑出的平滑过渡动画实现问询

问题描述 #

我有一个flex容器，内部包含两个并排的div（DIV 1、DIV 2）。默认状态下，DIV 1和DIV 2均可见：

• DIV 2为固定宽度（例如容器宽度的40%）
• DIV 1占据容器剩余宽度

我希望实现滑动效果：让DIV 2从右侧进一步滑入（带有transition/animation过渡动画），同时DIV 1向左滑出容器直至暂时不可见（但仍保留在DOM中）。

我尝试过多种增加DIV 2宽度的方式，但始终无法实现平滑的过渡动画。请问该如何实现？

原始代码 #

HTML

<div class="container">
    <div id="left">Left side div</div>
    <div id="right">Right side div </div>
</div>

CSS

.container {
    display: flex;
    flex-direction: row;
    height: 200px;
    width: 400px;
    border: 2px solid;
    gap: 10px;
    overflow: hidden;
    cursor: pointer;
}

#left {
    flex: 1;
    background-color: red;
    transition: 0.5s;
}

#right {
    width: 40%;
    background-color: blue;
}

.container:hover > #left {
    transform: translate(-100%);
}

（配图展示了默认状态下两个div并排的视觉效果）

解决方案 #

要实现左右div的同步平滑滑动，只需给右侧div添加宽度过渡动画，并调整hover状态的样式：

修改后的CSS代码：

.container {
    display: flex;
    flex-direction: row;
    height: 200px;
    width: 400px;
    border: 2px solid;
    overflow: hidden;
    cursor: pointer;
}

#left {
    flex: 1;
    background-color: red;
    transition: transform 0.5s ease;
}

#right {
    width: 40%;
    background-color: blue;
    transition: width 0.5s ease;
}

.container:hover > #left {
    transform: translateX(-100%);
}

.container:hover > #right {
    width: 100%;
}

关键调整说明：

1. 给右侧div（#right）添加transition: width 0.5s ease，让宽度从40%到100%的变化产生平滑过渡，实现“滑入”效果。
2. 移除容器的gap属性，避免过渡过程中出现间隙跳动的问题。
3. 明确左侧div的过渡属性为transform，确保平移动画稳定执行。

这样设置后，鼠标hover容器时，左侧div会完全向左滑出可视区域，右侧div同步从右侧滑入并占满整个容器，两个动画同步且平滑，同时左侧div始终保留在DOM中。

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