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