效果
思路
参考CSS手册 http://www.w3school.com.cn/css3/css3_animation.asp
用css的animation属性做动画
代码
wxml:
<view class="container">
<view class='anit {{show?"show":""}}'>请选择商品</view>
<view bindtap='anniu'>点击弹出提示</view>
</view>
wxss:
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
.anit{
width: 100%;
height: 70rpx;
background: red;
position: absolute;
color: white;
font-size: 30rpx;
line-height: 70rpx;
top: -70rpx;
text-align: center;
}
.show{
top: -70rpx;
animation: show 2s;
animation-timing-function:ease;
}
@keyframes show
{
0% {top:-70rpx;}
10% {top:0rpx;}
80% {top:0rpx;}
100% {top:-70rpx;}
}
js:
Page({
data: {
show: 0
},
onLoad: function () {
},
anniu: function (e) {
if(!this.data.show){
let that = this;
this.setData({
show: 1
})
setTimeout(function () {
that.setData({
show: 0
})
}, 2000)
}
}
})