vue项目列表折叠面板动画效果实现

 

点击折叠按钮实现详情展开关闭并增加动画效果

 

 1. 对需要展开的div设置css

.detail-collpase {

transition: all 0.3s;

height: 0px; //初始高度为0

overflow: hidden; // 要设置为hidden，不然内容会显示出来

}

2. 通过js去设置高度来实现动画效果

const nextElement = this.$refs['detail' + index][0] // 获取el

if(open) {

nextElement.style.height = "auto"; // 高度设置为自适应

let targetHeight = window.getComputedStyle(nextElement).height; // 此时获取元素高度并记录

nextElement.style.height = '0px'; //将高度设置为0

setTimeout(() => {

nextElement.style.height = targetHeight; // 恢复高度，动画效果出现

}, 20)

} else {

nextElement.style.height = '0px' // 关闭高度设置为0

}