小程序菜单下拉

这是小程序组件基础。
利用了keyframe来创建动画。
欢迎转载传播。

<view class='chsBar' bindtap='chsBarOrNot'>点击下拉</view>
<view class='itemBox' wx:if='{{chsBarOrNot}}'>
	<view class='item1'>下拉item1<view>
	<view class='item1'>下拉item2<view>
</view>

data:{
    chsBarOrNot:false
  },
chsBar(){    
    this.setData({
      chsBarOrNot:!this.data.chsBarOrNot
    })
  }

// css
.chsBar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100rpx;
  border: 1rpx solid black;
  backgroud: white
}

.itemBox {
  position: fixed;
  top: 100rpx;
  width: 100%;
}

.item1 {
  width: 100%;
  height: 100rpx;
  border: 1rpx solid black;
}

@keyframes slidown {
  from {
    transform: translateY(-100%);  
  }

  to {
    transform: translateY(0%);
  }
}

.slidown{
  display: block;
  animation: slidown 0.3s ease;
}