前端 折叠面板 折叠展开动画

前言

以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();
			},