使用CSS实现宽度动画且避免图片拉伸的技术问题

问题1：点击后标题立即显示，延迟设置无效 #

解决方案： #

给标题div添加过渡动画及延迟，确保其样式变化与容器展开动画同步，需在非active和active状态下明确过渡规则：

.nav .nav-link div {
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    height: 100%;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    position: absolute;
    top: 0;
    /* 添加过渡动画，延迟与容器展开时长一致 */
    transition: all 0.5s 2s;
    opacity: 1;
    z-index: 1; /* 确保标题在图片上方 */
}

.nav .nav-link.active div {
    writing-mode: initial;
    transform: initial;
    position: absolute;
    top: initial;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to left bottom, #51874CB3 0%, #1A5E3BFF 100%);
    /* 收起时无延迟，保证动画同步 */
    transition: all 0.5s;
}

原理： #

• 非active状态的div保持竖排可见，通过transition: all 0.5s 2s设置2秒延迟，等容器完全展开后再切换为底部横排样式。
• active状态下取消延迟，确保收起时标题样式立即跟随容器变化。

问题2：图片过渡时拉伸，transform占用原始宽度 #

解决方案： #

使用**transform: scaleX()**配合容器overflow:hidden实现图片横向展开，既不占用原始宽度，也能保持图片比例：

.nav .nav-link {
    position: relative;
    padding: 0;
    background: #1A5E3B;
    color: #fff;
    width: 40px;
    height: 375px;
    transition: width 2s;
    overflow: hidden; /* 裁剪超出容器的图片部分 */
}

.nav .nav-link img {
    width: 250px; /* 固定图片原始宽度 */
    height: 100%; /* 高度占满容器 */
    object-fit: cover; /* 保持图片比例，避免拉伸 */
    transform: scaleX(0); /* 初始状态横向缩放到0 */
    transform-origin: left; /* 从左侧开始缩放 */
    transition: transform 2s; /* 缩放动画时长与容器一致 */
}

.nav .nav-link.active img {
    transform: scaleX(1); /* active时恢复原始缩放比例 */
}

原理： #

• 容器添加overflow:hidden，隐藏初始状态下超出40px宽度的图片部分。
• 图片固定原始尺寸，通过transform: scaleX(0)横向收缩，transform-origin: left保证从左侧平滑展开，不会产生拉伸变形。
• object-fit: cover确保图片在容器内始终保持比例，避免因容器尺寸变化导致的变形。

完整修改后CSS代码： #

.nav .nav-link {
    position: relative;
    padding: 0;
    background: #1A5E3B;
    color: #fff;
    width: 40px;
    height: 375px;
    transition: width 2s;
    overflow: hidden;
}

.nav .nav-link div {
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    height: 100%;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    position: absolute;
    top: 0;
    transition: all 0.5s 2s;
    opacity: 1;
    z-index: 1;
}

.nav .nav-link img {
    width: 250px;
    height: 100%;
    object-fit: cover;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 2s;
}

.nav .nav-link.active {
    width: 250px;
    color: #fff;
}

.nav .nav-link.active div {
    writing-mode: initial;
    transform: initial;
    position: absolute;
    top: initial;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to left bottom, #51874CB3 0%, #1A5E3BFF 100%);
    transition: all 0.5s;
}

.nav .nav-link.active img {
    transform: scaleX(1);
}

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