效果
思路
参考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/viewwxss：
.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) } }})
