jq获取元素进行高度更改并有过度动画,使用animate赋值 auto 或者 fit-content 发现不生效。
$(‘.depBoxList’).animate({ height: fit-content}, 500)
可以通过jq获取元素高度,然后通过animate赋值数值进行实现高度自适应展开动画。
showAll() {
var that = this;
//showFlag:false-未展开状态,true-展开状态
if (that.showFlag) {
// 折叠-控制高度为170px,超出隐藏
$('.depBoxList').animate({ height: '170px' }, 500)
that.showFlag = false
} else {
// 展开-控制高度自适应,显示全部元素
//通过css获取元素自适应后的高度
var tempHeight = $(".depBoxList").css('height', 'auto').height() + 'px';
//瞬间复原
$('.depBoxList').css({ height: '170px' })
//再通过animate动画展开
$('.depBoxList').animate({ height: tempHeight }, 500)
that.showFlag = true
}
}