侧边栏折叠过渡运行时链接文字跳变的CSS实现问题求解

问题原因说明 #

shown.bs.collapse是Bootstrap Collapse组件的专属事件，仅当使用Bootstrap官方提供的data-bs-toggle="collapse"等标准折叠调用逻辑时才会触发，你当前是通过自定义CSS transition控制侧边栏宽度，因此不会触发该事件。

方案1：纯CSS实现（优先推荐） #

无需额外JS逻辑，仅通过控制文字透明度的过渡延迟，对齐侧边栏宽度过渡时长即可实现需求：

1. 给侧边栏内的文字元素统一添加自定义类（如sidebar-text）
2. 调整样式如下：

.sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 64px; /* 折叠状态宽度，可根据需求调整 */
    background: #193D4C;
    z-index: 100;
    transition: all 0.5s ease;
    overflow: hidden; /* 防止过渡过程中文字溢出 */
}
/* 侧边栏展开状态类，切换侧边栏时添加/移除该类即可 */
.sidebar.active {
    width: 290px;
}
.sidebar .sidebar-text {
    opacity: 0;
    white-space: nowrap; /* 强制文字不折行 */
    transition: opacity 0.2s ease;
    transition-delay: 0s; /* 收起时立即隐藏文字 */
}
.sidebar.active .sidebar-text {
    opacity: 1;
    transition-delay: 0.5s; /* 延迟和侧边栏过渡时长一致，等宽度变化完成后再显示文字 */
}

方案2：JS监听过渡结束事件实现 #

如果需要更灵活的控制逻辑，可以监听transitionend事件判断过渡完成状态：

1. 保留原有侧边栏样式，添加如下JS代码：

const mySidebar = document.getElementById('sidebar');
const textShowClass = 'show-text';

mySidebar.addEventListener('transitionend', (e) => {
    // 仅匹配宽度过渡结束事件，过滤其他属性的过渡触发
    if (e.propertyName !== 'width') return;
    const currentWidth = window.getComputedStyle(mySidebar).width;
    // 290px为你的展开状态宽度，可自行调整
    if (currentWidth === '290px') {
        mySidebar.classList.add(textShowClass);
    } else {
        mySidebar.classList.remove(textShowClass);
    }
})

2. 配套添加文字控制样式：

.sidebar .sidebar-text {
    opacity: 0;
    white-space: nowrap;
}
.sidebar.show-text .sidebar-text {
    opacity: 1;
    transition: opacity 0.2s ease;
}

两种方案都可以完全避免过渡过程中文字折行导致的跳变问题，优先推荐纯CSS方案，实现更简单、性能更好。

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