微信小程序下拉动画

wxml

<view class="content-container">
  <view class="pick-header" bindtap="onPickHeaderClick">
    筛选pick-header view z-index:60
  </view>

  <view class="pick-container {{needAnimation ? (openPicker ? 'slidown' : 'slidup') : ''}}">
    筛选项 pick-container view z-index:50
  </view>
</view>

wxss

.content-container {
width: 100%;
position: absolute;
}

/*筛选头部*/
.pick-header {
  width: 100%;
  height: 72rpx;
  z-index: 60;
  position: fixed;
 background-color: lightcoral;
}

/*筛选项容器布局*/
.pick-container {
  width: 100%;
  height: 300rpx;
  background-color: lightgoldenrodyellow;
  position: absolute;
  z-index: 50;
  top: -228rpx;
}

/*筛选项隐藏 显示动画 start*/
@keyframes slidown {
  from {
    transform: translateY(0%);
  }

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

.slidown {
  display: block;
  animation: slidown 0.1s ease-in both;
}

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

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

.slidup {
  display: block;
  animation: slidup 0.2s ease-in both;
}
/*筛选项隐藏 显示动画 end*/

js

Page({
  data: {
    openPicker: false,
    needAnimation: false,
    contentHeight: 0
  },

  onLoad: function () {

  },
  onPickHeaderClick: function () {
    this.setData({
      openPicker: !this.data.openPicker,
      needAnimation: true
    })
  },
})

 

转载于:https://www.cnblogs.com/chenmiaosong/p/9261696.html