wxml 代码
<
view
class
=
‘text’
bindtap
=
‘chooseSezi’>
请选择：商品
</
view
>
<!–隐藏区域 –>
<
view
class
=
‘maskLayer’
wx:if
=
“{
{chooseSize}}”
bindtap
=
‘hideModal’>
点击隐藏
</
view
>
<
view
class
=
‘choose’
wx:if
=
“{
{chooseSize}}”
animation
=
‘{
{animationData}}’>
这里面是内容
</
view
>
wxss代码
.text
{
width:
100%
;
position:
relative
;
height:
100
rpx
;
top:
800
rpx
;
line-height:
100
rpx
;
border:
1px
solid
#ccc
;
}
.maskLayer
{
position:
relative
;
top:
-93
rpx
;
width:
100%
;
height:
60
rpx
;
border:
1px
solid
#ccc
;
}
.choose
{
width:
100%
;
height:
500
rpx
;
background-color:
skyblue
;
}
js 代码
Page({
/**
* 页面的初始数据
*/
data: {
chooseSize:
false
,
false
,
animationData: {}
},
chooseSezi:
function
(e) {
function
(e) {
// 用that取代this，防止不必要的情况发生
var
that =
this
;
// 创建一个动画实例
var
animation = wx.createAnimation({
// 动画持续时间
duration:
500
,
500
,
// 定义动画效果，当前是匀速
timingFunction:
‘linear’
‘linear’
})
// 将该变量赋值给当前动画
that.animation = animation
// 先在y轴偏移，然后用step()完成一个动画
animation.translateY(
500
).step()
500
).step()
// 用setData改变当前动画
that.setData({
// 通过export()方法导出数据
animationData: animation.export(),
// 改变view里面的Wx：if
chooseSize:
true
true
})
// 设置setTimeout来改变y轴偏移量，实现有感觉的滑动
setTimeout(
function
() {
function
() {
// 230 移动的距离
animation.translateY(
230
).step()
230
).step()
that.setData({
animationData: animation.export()
})
},
200
)
200
)
},
// 隐藏
hideModal:
function
(e) {
function
(e) {
var
that =
this
;
var
animation = wx.createAnimation({
duration:
1000
,
1000
,
timingFunction:
‘linear’
‘linear’
})
that.animation = animation
animation.translateY(
500
).step()
500
).step()
that.setData({
animationData: animation.export()
})
setTimeout(
function
() {
function
() {
animation.translateY(
0
).step()
0
).step()
that.setData({
animationData: animation.export(),
chooseSize:
false
false
})
},
1000
)
1000
)
},
/**
* 生命周期函数–监听页面加载
*/
onLoad:
function
(options) {
function
(options) {
},
/**
* 生命周期函数–监听页面初次渲染完成
*/
onReady:
function
() {
function
() {
},
/**
* 生命周期函数–监听页面显示
*/
onShow:
function
() {
function
() {
},
/**
* 生命周期函数–监听页面隐藏
*/
onHide:
function
() {
function
() {
},
/**
* 生命周期函数–监听页面卸载
*/
onUnload:
function
() {
function
() {
},
/**
* 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh:
function
() {
function
() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom:
function
() {
function
() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage:
function
() {
function
() {
}
})
微信小程序文档
https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html
仿照原创博客所写,感谢原创(https://www.cnblogs.com/chinabin1993/p/7605764.html)