点击图片弹出文本时，实现下方图片与文本平滑下移动画的方案咨询

针对你要实现的点击图片（示例中用div模拟）时，对应文本平滑显示/隐藏、同时底部图片元素跟随平滑下移的需求，这里分享几种实用的实现思路，基于你的现有代码改造：

思路1：CSS过渡结合max-height控制（最简便） #

核心是放弃display: none/block（该属性无法过渡），改用max-height和opacity控制文本的显示状态，配合CSS过渡实现平滑效果。当文本展开时，其高度变化会自然推动底部元素下移。

修改后的代码：

CSS #

* {
  padding: 0;
  margin: 0;
}

div {
  width: 200px;
  height: 200px;
  background-color: red;
  margin-top: 1em;
}

p {
  width: 200px;
  max-height: 0; /* 初始高度为0，隐藏内容 */
  opacity: 0;
  overflow: hidden; /* 超出部分隐藏 */
  transition: max-height 0.5s ease, opacity 0.5s ease; /* 过渡动画 */
  margin-top: 0.5em; /* 可选，增加文本和图片的间距 */
}

/* 激活状态：展开文本 */
p.active {
  max-height: 1000px; /* 设置足够大的值，确保容纳所有文本 */
  opacity: 1;
}

JavaScript #

document.getElementById("image").addEventListener("click", function() {
  const textEl = document.getElementById("text");
  textEl.classList.toggle("active"); // 切换激活类
});

说明：这种方式无需复杂JS逻辑，纯CSS过渡就能实现需求。注意max-height的值要足够大，避免文本内容超出后被截断。

思路2：CSS自定义动画实现（更灵活） #

用@keyframes定义文本展开/收起的动画细节，相比过渡能更精细地控制动画过程，比如调整高度和透明度的变化顺序。

修改后的代码：

CSS #

* {
  padding: 0;
  margin: 0;
}

div {
  width: 200px;
  height: 200px;
  background-color: red;
  margin-top: 1em;
}

p {
  width: 200px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0.5em;
}

/* 展开动画 */
p.active {
  animation: expandText 0.5s forwards; /* forwards保持动画结束状态 */
}

/* 收起动画 */
p:not(.active) {
  animation: collapseText 0.5s forwards;
}

@keyframes expandText {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 1000px;
    opacity: 1;
  }
}

@keyframes collapseText {
  from {
    max-height: 1000px;
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}

JavaScript #

document.getElementById("image").addEventListener("click", function() {
  const textEl = document.getElementById("text");
  textEl.classList.toggle("active");
});

说明：如果需要更复杂的动画效果（比如先淡入再展开高度），可以在@keyframes中添加更多关键帧来调整。

思路3：JS动态计算文本高度（适配动态内容） #

如果文本内容是动态变化的，或者担心max-height设置过大导致过渡时长不准确（短文本也用长过渡时间），可以用JS先计算文本的真实高度，再动态设置过渡。

修改后的代码：

CSS #

* {
  padding: 0;
  margin: 0;
}

div {
  width: 200px;
  height: 200px;
  background-color: red;
  margin-top: 1em;
}

p {
  width: 200px;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 0.5s ease, opacity 0.5s ease;
  margin-top: 0.5em;
}

JavaScript #

const imageEl = document.getElementById("image");
const textEl = document.getElementById("text");
let isExpanded = false;

// 提前计算文本的真实高度（临时显示文本获取高度后再隐藏）
const realTextHeight = (() => {
  textEl.style.height = "auto";
  const height = textEl.offsetHeight;
  textEl.style.height = "0";
  return height;
})();

imageEl.addEventListener("click", function() {
  if (isExpanded) {
    // 收起文本
    textEl.style.height = "0";
    textEl.style.opacity = "0";
  } else {
    // 展开文本，使用真实高度
    textEl.style.height = `${realTextHeight}px`;
    textEl.style.opacity = "1";
  }
  isExpanded = !isExpanded;
});

说明：这种方式过渡时长更精准，适合文本内容动态变化的场景。如果文本内容更新，需要重新计算高度。

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