微信小程序-顶部提示框弹出动画

效果

思路 

参考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)
    }
  }
})