使用transition无法实现<div>容器尺寸平滑过渡的问题求助

嘿，我完全懂你遇到的这个困扰——点击链接后容器突然“跳变”，破坏了整个流畅的体验对吧？咱们来拆解问题，然后一步步搞定它～

问题根源 #

你用hide()和show()方法切换元素的时候，本质是直接修改了元素的display属性（从none到block或者反过来），而**display属性的变化是无法触发CSS过渡动画**的。容器尺寸突然变化，就是因为大图标瞬间消失、textarea瞬间出现，浏览器直接重算了容器的尺寸，没有过渡的过程。

解决方案：用可过渡的属性替代display切换 #

我们可以改用opacity、visibility、height这类支持过渡的属性来控制元素的显示/隐藏，同时给容器添加过渡让尺寸变化平滑。下面是具体的修改方案：

1. 调整CSS样式

先给相关元素和容器加上过渡效果，用类来控制状态：

/* 给容器添加过渡，确保尺寸变化平滑 */
.container {
  transition: all 0.5s ease; /* 0.5秒的过渡更自然，你可以根据需求调整时长 */
  padding: 2rem;
  box-sizing: border-box;
  min-height: 180px; /* 设置最小高度，避免容器缩得太突兀 */
}

/* 大图标初始状态，添加过渡 */
#icon {
  font-size: 7rem;
  transition: all 0.5s ease;
  opacity: 1;
  visibility: visible;
  height: auto;
  margin: 1rem 0;
}

/* 大图标隐藏状态：透明+不可见+高度归零 */
#icon.hidden {
  opacity: 0;
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

/* 小图标初始隐藏状态 */
#icon2 {
  font-size: 1.2rem;
  transition: all 0.5s ease;
  opacity: 0;
  visibility: hidden;
}

/* 小图标显示状态 */
#icon2.show {
  opacity: 1;
  visibility: visible;
}

/* textarea初始隐藏状态 */
.textarea-script {
  transition: all 0.5s ease;
  opacity: 0;
  visibility: hidden;
  height: 0;
  padding: 0;
  border: none;
  resize: none;
}

/* textarea显示状态 */
.textarea-script.show {
  opacity: 1;
  visibility: visible;
  height: 150px; /* 设置textarea的目标高度 */
  padding: 0.8rem;
  border: 1px solid #ddd;
  margin-top: 1rem;
}

2. 修改JavaScript逻辑

不再用hide()/show()，而是通过添加/移除类来切换元素状态：

$(document).ready(function(){
  $(".script-link").click(function() {
    $("#icon").addClass("hidden");
    $("#icon2").addClass("show");
    $("#script").addClass("show");
  });
});

3. 调整HTML结构（可选）

可以把元素的初始状态用CSS类来控制，而不是内联样式，这样更清晰：

<body>
  <div class="container">
    <form id="contact" action="" method="post">
      <i id="icon" class="fas fa-check-circle"></i>
      <h3 class="success-msg">Your <a class="script-link">script</a> has been approved! 
        <i id="icon2" class="fas fa-check-circle"></i>
      </h3>
      <fieldset>
        <textarea class="textarea-script" id="script"></textarea>
      </fieldset>
    </form>
  </div>
</body>

为什么这样有效？ #

• opacity控制元素的透明度，从1到0的变化会有淡入淡出效果
• visibility确保元素在透明后不再占据点击交互空间
• height的变化会让元素慢慢收缩/展开，容器的尺寸也会跟着平滑过渡
• 容器本身的transition: all会让它的高度/宽度变化也带上过渡动画，彻底解决“跳变”问题

如果你不想给textarea设置固定高度，也可以用max-height来实现自适应：比如初始给textarea设置max-height: 0，显示时改成max-height: 300px，这样它会根据内容高度展开（只要内容不超过300px）。

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