CSS Transition仅单向生效：文本折叠/展开过渡功能异常求助

嘿，我来帮你搞定这个过渡失效的问题！你遇到的核心原因是CSS过渡需要明确的起始和结束数值才能生效，而你的初始设置里，.toggle-text没有默认的height值，浏览器默认是auto——当第一次从折叠状态展开时，其实是从50px跳到auto，而过渡对auto是不支持的，所以展开时看不到动画；但折叠时是从400px降到50px，两个都是明确数值，所以过渡正常工作。

下面给你两种解决方案，按需选择：

方案一：固定高度的精确过渡 #

修改你的CSS，给.toggle-text设置默认的展开高度，这样切换时都是明确数值之间的过渡：

修改后的CSS #

.toggle-text { 
  word-wrap: break-word; 
  width: 250px; 
  transition: height 500ms; 
  margin: 0 200px 0 200px;
  height: 400px; /* 设置默认展开状态的高度 */
} 
.collapsed { 
  height: 50px; 
  overflow: hidden; 
} 
/* 可以删掉.expanded类，因为默认就是展开状态 */

修正后的jQuery（修复语法错误） #

$('.toggle-text').on('click', function() { 
  $(this).toggleClass('collapsed'); 
});

这样初始状态是展开的，点击后添加collapsed类触发折叠动画，再次点击移除类触发展开动画，两边都能正常看到过渡效果。

方案二：自适应内容的max-height过渡（更通用） #

如果你的文本内容高度不固定，用max-height代替height会更灵活——设置一个足够大的max-height作为展开状态，折叠时限制小的max-height，过渡依然生效：

优化后的CSS #

.toggle-text { 
  word-wrap: break-word; 
  width: 250px; 
  transition: max-height 500ms ease; 
  margin: 0 200px 0 200px;
  max-height: 1000px; /* 设一个比内容最大高度大的值 */
  overflow: hidden;
} 
.collapsed { 
  max-height: 50px; 
}

jQuery代码和方案一一致 #

$('.toggle-text').on('click', function() { 
  $(this).toggleClass('collapsed'); 
});

这种方式不需要固定内容高度，不管文本多长，只要max-height设置足够大，折叠展开的过渡都会正常工作。

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