先看效果图，只有静态截图，抱歉看不到动态效果~

模板部分

<view class="handler" :class="{'show':showBox, 'hide':hideBox}">
    <view class="box"></view>
</view>

js部分

data(){
    return{
        showBox: false,
        hideBox: false,
        currentOffsetTop: 0,
    }
}
onload(){
    this.showBox = true
}
//重点代码 页面滚动事件
onPageScroll(e){
    if(e.scrollTop > 0 && e.scrollTop > this.currentOffsetTop){
      this.hideBox = true
    } else {
      this.hideBox = false
    }
    this.currentOffsetTop = e.scrollTop
},

css动画部分

<style scoped lang="scss">
  @keyframes showHandler {
    0% {
      transform: translateY(calc(100% + 40rpx));
    }
    80% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes hideHandler {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(calc(100% + 40rpx));
    }
  }
  .handler {
      position: fixed;
      bottom: 40rpx;
      left: 20rpx;
      right: 20rpx;
      box-sizing: border-box;
      transition: transform .5s ease-in-out;
      transform: translateY(calc(100% + 40rpx));
      &.show {
        animation: showHandler 0.3s cubic-bezier(0.24, 1.3, 0.49, 1.28) forwards;
      }
      &.hide {
        animation: hideHandler 0.3s cubic-bezier(0.24, 1.3, 0.49, 1.28) forwards;
      }
</style>
  

需要改进的地方是：页面每次滚动都会触发数据的更新，加上debounce进行防抖效果更好