前言 以uniapp代码来说明折叠面板原理
效果
原理 首先折叠展开动画选择 transition属性
transition: all 0.4s;
然后使动画生效：动态改变折叠面板的高度
【前端|前端 折叠面板 折叠展开动画】折叠面板初始高度为0（height 0 ）然后再根据折叠面板里面内容的高度，改变折叠面板的height，
* 如果你的折叠面板是已知的展开高度，那就直接在0与已知高度里进行切换
* 如果你的折叠面板高度是不确定的，那就要在折叠面板里面再用一层view把内容包起来，然后写代码动态获取这个view的高度，再赋值给折叠面板的高度
*折叠与展开（重点就是overflow：hidden, 内容是已经渲染好了，只不过我们高度为0，所以隐藏了，展开的话就是获取内容的高度，显示即可)
代码实现 折叠面板css
.v-collapse {
height: 0rpx;
overflow: hidden;
transition: all 0.4s;
.u-collapse-content {
overflow: hidden;
/* 这个要加，不然里面的内容在没达到内容的高度时就会透出来*/
}
}折叠面板，一定要记得在折叠面板里面再套一层view（.u-collapse-content）包裹元素，然后后面要计算这个view的高度
{{item.spuName || ''}}
￥{{ (item.price / 100).toFixed(2)}}
x{{item.count}}
动态计算内容的高度（uniapp 的 uview框架 ）：
获取id为elId 的元素，得到它的高度
// 查询内容高度
queryRect() {
// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
// 组件内部一般用this.$uGetRect，对外的为this.$u.getRect，二者功能一致，名称不同
this.$uGetRect('#' + this.elId).then(res => {
this.collapseHeight = res.height;
})
},$uGetRect(selector, all) {
return new Promise(resolve => {
uni.createSelectorQuery().
in(this)[all ? 'selectAll' : 'select'](selector)
.boundingClientRect(rect => {
if (all && Array.isArray(rect) && rect.length) {
resolve(rect)
}
if (!all && rect) {
resolve(rect)
}
})
.exec()
})
},点击进行折叠与展开（重点就是overflow：hidden, 内容是已经渲染好了，只不过我们高度为0，所以隐藏了，展开的话就是获取内容的高度，显示即可)
onCollapse() {
this.isCollapse = this.isCollapse ? false : true
this.queryRect();
},推荐阅读
- #|弹性盒基础
- #|Javascript之原型与原型链
- [C语言小白]三子棋小程序
- 前端|生鲜 B2B 技术平台的前端团队该如何搭建（B2B 技术共享第七篇）
- 如何使用PHP，MySQL从一组坐标(经度和纬度)中查找最近的位置
- uniapp 如何将输入值转成大写
- IPC之消息队列·即时通讯小程序
- 微信小程序模拟购物界面联动
- 有哪些非常好的前端网站或个人博客（）