【css动画】从小程序底部弹出模态框，上滑隐藏，下滑显示

本文链接：https://blog.youkuaiyun.com/weixin_51055997/article/details/130629523

文章展示了如何在Vue应用中处理页面滚动事件，通过切换class实现顶部导航的显示与隐藏动画。利用CSSKeyframes创建了上滑下滑的动画效果，并指出在页面滚动事件中应用防抖(debounce)函数可以提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

模板部分

<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>