微信小程序标签展开收起动画,使用css3的transition当高度变化时触发过渡效果,此方法需要固定高度,如果高度不固定,需要手动获取高度。
<view class="children flex flex-warp" style="height: {{item.childrenHeight}}px;" >
children中初始化高度为0,通过点击事件修改height的高度,触发transtion过渡效果。
.children {
height: 0;
padding: 0;
background: #fff;
transition: height 1s; // 通过高度变化触发过渡效果
overflow: hidden; // 超出隐藏,必须加,否则可能出错
}
overflow: hidden;没有加的话,可能导致出现下图情况。
效果图