Свойства перехода не работают при переключении класса элемента 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 большее значение, чем необходимо * Значение 1009 * в пикселях, поэтому переход CSS будет работать без обрезки содержимого внутри него.

Answer 2

Я думаю, вам может понадобиться добавить это свойство transition к обоим классам. Проверьте эту кодовую ручку от MDN: https://codepen.io/pen/?&editable=true