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

时间：2021-05-15 20:10:51 阅读：27 评论：0 收藏：0 [点我收藏+]

技术分享图片

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

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

}

原文：https://www.cnblogs.com/zerofan/p/14772151.html

踩

(0)

评论一句话评论（0）

分享档案

更多>