微信小程序展开收起动画效果

2019独角兽企业重金招聘Python工程师标准>>>

微信小程序原生组件实现动画效果有很多限制。总结一下最近写的一个小程序的动画效果。初步思路是用css3的transition当高度变化时触发过渡效果，此方法需要固定高度，如果高度不固定，需要手动获取高度.

wxml:

item.isShow是控制元素的展开和收起的开关，index==current的是判断当前点击的元素和当前的索引是同一个，避免高度继承上一个点击的元素的高度。展开时，高度为元素原本高度，收起时为0。

wxss:

transition:过渡时间，height如果有固定高度就写固定高度，如果没有，写一个非0的高度。动态获取高度可以替换掉这里的高度。

js:

js里定义开关，以及动态获取元素的高度。

转载于:https://my.oschina.net/kitty0107/blog/2985291