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

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

浏览量:3148 时间: 来源:weixin_34413802

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

                                                                                       

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

wxml:

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

wxss:

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

js:

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

                                                                                                           小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎