微信小程序设置超出隐藏，点击加载更多实现动画效果

微信小程序设置超出隐藏，点击加载更多实现动画效果

问题描述

业务开发中经常会有一些场景，以商品订单场景为例，少于两个商品，不显示更多按钮，超过两个显示更多，点击展开，商品全部展示，并且有渐变动画效果

解决方案

Tips：先说下自己当时的误区的纠正：
动画的发生需要满足以下条件：

1. 实现动画的元素 css 属性写上了 transition 属性，并且值设置正确（具体值代表什么，自行百度）
2. 元素需要实现动画的属性需要有具体的值的变化，如果不是具体的值则，不会实现动画（比如：max-height 的值由 100px => 200px 会有动画，但是由 100px => none/inherit 则不会有动画）

实现效果如下图：

根据 Tips 的两点条件，遇到的瓶颈如下：

1. 产生动画的元素必须要有 css 属性值的具体变化；
2. 商品的数量是不一定的，难以设置属性值的具体变化

解决上述两点，其实就是实现的思路：

1. css 属性值得具体变化，可以使用 max-height 属性来控制；
2. 动态获取商品列表容器的高度，然后设置给 max-height 属性，这样，max-height 属性会由两个商品的高度和多个商品的高度来切换；

主要代码如下：

<!--视图层：
    ware-list 为最外层，由 max-height 控制动画，并且设置 overflow:hidden；
    list-box 为包裹商品的盒子，max-height 的最大值为此盒子的高度，
    list 为每一商品项
    此处 278rpx 是商品为两个时的商品列表盒子的大概高度
-->
<view class="wares-lists" style="max-height:{{showAllWares?listBoxHeight:'278rpx'}};">
    <view id="list-box">
        <view class="list" wx:for="{{moduleData.wares}}" wx:key="index">
            
        </view>
    </view>
</view>

<!-- 设置需要动画元素的样式 -->
.wares-lists {
	overflow: hidden;
	transition: all 0.2s linear;
}

部分 js 代码如下：

const app = getApp();
Component({
	/**
	 * 组件的属性列表
	 */
	properties: {
		moduleData: {
			type: Object
		},
	},

	/**
	 * 组件的初始数据
	 */
	data: {
		showAllWares: false,
		listBoxHeight: '278rpx',
	},
	ready: function () {
		this.setListHeight();
	},
	/**
	 * 组件的方法列表
	 */
	methods: {
		toggleShow: function (e) {
			this.setData({
				showAllWares: !this.data.showAllWares
			});
		},

		// 设置商品列表高度
		setListHeight () {
			this._getElementHeight('#list-box').then( height => {
				this.setData({
					listBoxHeight:`${height}px`,
				});
			});
		},

		// 获取指定元素实际宽度
		_getElementHeight(id = "") {
			const _query = this.createSelectorQuery();
			return new Promise(resolve => {
				_query.select(id).fields({
					size: true,
				}, (res) => {
					resolve(res.height);
				}).exec();
			});
		},
	}
});

总结：
在这里只是个抛砖引玉提供一个思路，小程序中可以这样实现，在 H5 中也可以这样实现。