javascript - 切换 HTML 元素类的大小时，过渡属性不起作用？

Question

只是一个简单的 CSS 和 jQuery 函数，可以在删除类时简化转换。我也尝试过使用 Jquery，但似乎没有任何效果。经过至少十几次尝试，有什么想法吗？

jQuery

$(document).ready(function(){
$(document).on('click', '.review-block', function(){
    $(this).find(".review-body").toggleClass('small');
 }); 
});

CSS

.review-body{
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 5px;
    font-family: sans-serif;
    font-size: 15px;
    margin-bottom: 10px;
    overflow: hidden;
     transition: all 1s ease;
}
.small{
    max-height: 125px;
}

HTML

<div class="review-body small">
  //TEXT HERE
</div>

Answer 1

之所以没有观察到转变，是因为在 .review-body 中没有明确的max-height设置，这意味着它使用初始值 auto 。您无法在非像素值(例如 auto 、 100% ...)与设置的像素值之间转换。

解决方案是给出 .review-body必要的更大的max-height以像素为单位的值，这样 CSS 过渡仍然可以工作，而无需剪切其中的内容。