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
}