切换 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;

}

超文本标记语言

<div class="review-body small">

  //TEXT HERE

</div>

Answer 1

之所以没有观察到转变，是因为.review-body没有显式的max-height集合，这意味着它使用 的初始值auto。您无法在非像素值（例如auto，100%...）与设置的像素值之间转换。解决方案是提供.review-body一个更大的必要max-height值（以像素为单位），以便 CSS 过渡仍然有效，而无需剪切其中的内容。

Answer 2

我认为您可能需要将该transition属性添加到两个类中。从 MDN 查看此 Codepen：https://codepen.io/pen/?&editable =true