如何在Bootstrap中实现React列的平滑展开动画效果

你现在的写法是直接切换col-9/col-12类，还直接卸载右侧列，难怪切换起来生硬。要做平滑动画，核心是用CSS过渡（transition）控制宽度和透明度变化，别直接卸载组件，而是通过样式慢慢隐藏/显示。

下面是改好的完整代码：

import { useState } from 'react';

const YourComponent = () => {
  const [open, setOpen] = useState(false);
  // 简化toggle逻辑，不用写if-else
  const zoom = () => setOpen(!open);

  return (
    <>
      <div>
        {/* 补了按钮的点击事件，你原来的代码漏了这个 */}
        <button onClick={zoom}>zoom in and out</button>
      </div>
      <div className="row" style={{ display: 'flex', gap: '1rem' }}>
        {/* 主列：自定义类控制宽度过渡 */}
        <div className={`main-col ${open ? 'expanded' : ''}`}>
          Content that can be expanded    
        </div>
        {/* 右侧列：用过渡控制宽度+透明度，不直接卸载 */}
        <div className={`sidebar-col ${open ? 'hidden' : ''}`}>
          content that gets hidden when zooming in
        </div>  
      </div>
    </>
  );
};

export default YourComponent;

对应的CSS样式：

/* 主列基础样式，对应col-9的75%宽度 */
.main-col {
  flex: 0 0 75%;
  transition: flex 0.3s ease; /* 0.3秒平滑过渡宽度 */
  background: #f5f5f5;
  padding: 1rem;
}

/* 展开后占满100%宽度 */
.main-col.expanded {
  flex: 0 0 100%;
}

/* 右侧列基础样式，对应col-3的25%宽度 */
.sidebar-col {
  flex: 0 0 25%;
  transition: flex 0.3s ease, opacity 0.3s ease; /* 同时过渡宽度和透明度 */
  opacity: 1;
  background: #e5e5e5;
  padding: 1rem;
}

/* 隐藏时收缩宽度+变透明 */
.sidebar-col.hidden {
  flex: 0 0 0;
  opacity: 0;
  overflow: hidden; /* 防止内容漏出来 */
}

.row {
  display: flex;
  gap: 1rem; /* 列之间的间距，过渡时会自动调整 */
}

几个关键改动： #

• 补了按钮的onClick事件：你原来的代码里按钮没绑定点击事件，功能根本触发不了，必须加上。
• 简化toggle逻辑：把原来的if-else改成setOpen(!open)，代码更简洁直观。
• 用flex属性做过渡：直接控制flex属性比切换Bootstrap的col类更适合做动画，col类的宽度是瞬间变化的，加上transition就能实现平滑过渡。
• 不直接卸载右侧列：原来的!open &&会直接删除右侧列，现在改成用样式慢慢收缩宽度+降低透明度，保证动画连贯性。
• 自定义过渡参数：0.3秒的过渡时长比较自然，你也可以根据需求调整成0.5s这类数值。

如果你想保留Bootstrap的col类，也可以这么改：

<div className={`col ${open ? 'col-12' : 'col-9'} transition-col`}>
  Content that can be expanded    
</div>
{/* 右侧列保留col类，加过渡样式 */}
<div className={`col col-3 transition-col ${open ? 'hidden' : ''}`}>
  content that gets hidden when zooming in
</div>

对应的CSS：

.transition-col {
  transition: width 0.3s ease;
}

.row {
  flex-wrap: nowrap; /* 防止列换行，保证动画在一行内完成 */
}

.hidden {
  width: 0 !important;
  opacity: 0;
  overflow: hidden;
}

这种方式要注意Bootstrap的col类基于width百分比，所以过渡width属性即可，同时给row加flex-wrap: nowrap避免列换行影响动画效果。

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