如何为行内可展开容器添加展开/收起平滑过渡动画

问题分析 #

当前代码通过切换expanded/collapsed类控制容器宽度，但过渡效果无效，核心原因：

• flex-basis: auto属于动态计算值，无法应用过渡动画
• 使用display: none/block切换内容，这类属性不支持过渡效果

解决方案 #

通过以下调整实现平滑动画：

1. 给容器的flex属性添加过渡，替代原有的max-width过渡逻辑
2. 用max-width+opacity的组合替代display属性切换，实现内容的渐显/隐藏

修改后的完整代码 #

HTML

<div class="row">
  <div class="container">
    <div class="header">
      <h3 class="title">Title 1</h3>
    </div>
    <div class="content">
      <div class="color color1"></div>
      <div class="opis">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed ex turpis. Vivamus malesuada ante sit amet ullamcorper hendrerit.
      </div>
    </div>
  </div>
  <div class="container">
    <div class="header">
      <h3 class="title">Title 2</h3>
    </div>
    <div class="content">
      <div class="color color2"></div>
      <div class="opis">
        Sed vestibulum posuere dictum. Aliquam erat volutpat. Ut sodales odio mi, nec interdum felis lobortis a.
      </div>
    </div>
  </div>
  <div class="container">
    <div class="header">
      <h3 class="title">Title 3</h3>
    </div>
    <div class="content">
      <div class="color color3"></div>
      <div class="opis">
        Nullam bibendum, velit vel feugiat vestibulum, quam turpis dictum mauris, non iaculis tellus sem ac mi.
      </div>
    </div>
  </div>
  <div class="container">
    <div class="header">
      <h3 class="title">Title 4</h3>
    </div>
    <div class="content">
      <div class="color color4"></div>
      <div class="opis">
        Phasellus sodales pharetra diam at luctus. In egestas nisi eu urna ullamcorper, at tempus lacus ultrices.
      </div>
    </div>
  </div>
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  height: 100%;
}

.container {
  flex: 1 1 25%; /* 初始状态：4个容器各占25%宽度 */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: flex 0.5s ease; /* 给flex属性添加过渡动画 */
}

.header {
  cursor: pointer;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.content {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: row;
}

.container .color {
  flex: 1;
  min-height: 200px;
}

.container .color1 {
  background-color: #ff0000;
}

.container .color2 {
  background-color: #00ff00;
}

.container .color3 {
  background-color: #0000ff;
}

.container .color4 {
  background-color: #ff00ff;
}

/* 展开状态：占比40% */
.container.expanded {
  flex: 2 1 40%;
}

/* 收起状态：占比20% */
.container.collapsed {
  flex: 1 1 20%;
}

.container .opis {
  background-color: #f0f0f0;
  padding: 10px;
  line-height: 1.5;
  max-width: 0; /* 初始宽度为0，隐藏内容 */
  opacity: 0;
  overflow: hidden; /* 截断超出内容 */
  transition: max-width 0.5s ease, opacity 0.5s ease; /* 添加内容过渡 */
}

.container.expanded .opis {
  max-width: 50%; /* 展开后宽度设为50% */
  opacity: 1;
}

JavaScript

const containers = document.querySelectorAll(".container");

containers.forEach((container) => {
  const header = container.querySelector(".header");

  header.addEventListener("click", () => {
    const isExpanded = container.classList.contains("expanded");
    
    // 重置所有容器状态
    containers.forEach(c => {
      c.classList.remove("expanded", "collapsed");
    });
    
    // 设置当前容器及其他容器的状态
    if (isExpanded) {
      // 已展开则恢复初始均分状态
      containers.forEach(c => c.style.flex = "1 1 25%");
    } else {
      container.classList.add("expanded");
      containers.forEach(c => {
        if (c !== container) c.classList.add("collapsed");
      });
    }
  });
});

关键修改说明 #

• 容器宽度过渡：通过flex-grow+flex-basis的组合控制宽度占比，给flex属性添加过渡，替代原有的flex-basis: auto，确保过渡动画生效
• 内容显隐过渡：移除display属性切换，改用max-width从0到50%的过渡结合opacity变化，实现内容的平滑显示/隐藏
• 过渡时长设为0.5s（可根据需求自行调整），保证动画流畅自然

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