只是一个简单的 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>
最佳答案
之所以没有观察到转变,是因为在 .review-body
中没有明确的max-height
设置,这意味着它使用初始值 auto
。您无法在非像素值(例如 auto
、 100%
...)与设置的像素值之间转换。
解决方案是给出 .review-body
必要的更大的max-height
以像素为单位的值,这样 CSS 过渡仍然可以工作,而无需剪切其中的内容。
关于javascript - 切换 HTML 元素类的大小时,过渡属性不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61020742/