2

需求:
实现如下效果
20200502_233357.gif

实现:
定义参数

option:{
    duration: 100, // 动画执行时间
    timingFunction: 'ease-in'  // 动画执行效果
}

定义animation
image.png

设置初始不展示:

.commonInner {
    height:0;
    overflow:  hidden;
}

展开方法:

open:function(){
    let me=this;
    var box = wx.createAnimation(me.data.option);//初始化animation
    let hei=40*4;//可设置动态获取高度
    box.height(hei).step();//设置动画效果
    me.setData({
        inner: box.export(),
        openFlag:true//判断当前状态(展开/收起)
    })
}

收起方法:

close: function () {
    let me = this;
    var box = wx.createAnimation(me.data.option);
    box.height(0).step();
    me.setData({
        inner: box.export(),
        openFlag: false
    })
}

代码地址: https://github.com/myweiwei/s...
将不断更新完善,期待您的批评指正!


薇薇
298 声望24 粉丝

路漫漫其修远兮,吾将上下而求索