css3 底部滑出,小程序总结（十四）-关于从底部向上滑出的动画

前沿： 业务代码写完了脑阔疼，来偷个懒更新一片博客，积累一下吧。

HTML代码

CSS代码

.mCostDetail{

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

z-index: 9999;

}

.mCostDetail__bg{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

}

.mCostDetail__box{

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 857rpx;

background: #fff;

z-index: 100;

}

JS代码

showCostDetailFun() {

// 显示遮罩层

var animation = wx.createAnimation({

duration: 200,

timingFunction: "linear",

delay: 0

})

animation.translateY(600).step()

this.setData({

animationData: animation.export(),

showCostDetail: true

})

setTimeout(function () {

animation.translateY(0).step()

this.setData({

animationData: animation.export()

})

}.bind(this), 200)

},

hideCostDetailFun() {

// 隐藏遮罩层

var animation = wx.createAnimation({

duration: 200,

timingFunction: "linear",

delay: 0

})

animation.translateY(600).step()

this.setData({

animationData: animation.export(),

})

setTimeout(function () {

animation.translateY(0).step()

this.setData({

// animationData: animation.export(),

showCostDetail: false

})

}.bind(this), 200)

}

原理

1、使用下面的代码创建一个annimation对象

var animation = wx.createAnimation({

duration: 200,

timingFunction: "linear",

delay: 0

})

2、用返回的animation对象根据官方文档的动画API进行你想要的动画效果

animation.translateY(600).step()

3、完成动画操作之后使用animation这个对象的export()方法导出动画数据

this.setData({

animationData: animation.export(),

})

4、将导出的动画数据使用animation="{{animationData}}"的形式绑定到HTML结构上，就可以了。