小程序的右侧抽屉开关动画手写效果

javascript 复制代码
<template>
  <view>
    <button @click="openDrawer">打开抽屉</button>
    
    <view v-if="showDrawer" class="drawer" :style="{ backgroundColor: bgColor }" @click="closeDrawer">
      <view class="drawerContent" :animation="animationData" @click.stop>
        <view class="drawerName">
          <view style="font-weight: bold;" class="drawerName_title">价格区间(元)</view>
          <view style="position: relative;">
            <text @click="closeDrawer" class="drawerName_icon qh-rt-single qh-rt-a-zu4416 choose-sku-close-icon"></text>
          </view>
        </view>
        <!-- ... 其余内容保持不变 ... -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDrawer: false,
      animationData: {},
      bgColor: 'rgba(0, 0, 0, 0)',
      animation: null,
      // ... 其他数据
    }
  },
  methods: {
    openDrawer() {
      this.showDrawer = true;
      this.bgColor = 'rgba(0, 0, 0, 0)';
      this.$nextTick(() => {
        this.animation = uni.createAnimation({
          duration: 300,
          timingFunction: 'ease-out',
        });
        this.animation.translateX(0).step();
        this.animationData = this.animation.export();
        
        // 背景颜色渐变
        let opacity = 0;
        const bgInterval = setInterval(() => {
          opacity += 0.1;
          this.bgColor = `rgba(0, 0, 0, ${opacity})`;
          if (opacity >= 0.5) {
            clearInterval(bgInterval);
          }
        }, 30);
      });
    },
    closeDrawer() {
      this.animation.translateX('100%').step();
      this.animationData = this.animation.export();
      
      // 背景颜色渐变
      let opacity = 0.5;
      const bgInterval = setInterval(() => {
        opacity -= 0.1;
        this.bgColor = `rgba(0, 0, 0, ${opacity})`;
        if (opacity <= 0) {
          clearInterval(bgInterval);
          this.showDrawer = false;
        }
      }, 30);
    }
  }
}
</script>

<style lang="scss">
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 999;
}

.drawerContent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-top: 140rpx;
  background: #fff;
  width: 512rpx;
  transform: translateX(100%); // 初始位置在屏幕右侧
}

// ... 其他样式保持不变 ...
</style>
相关推荐
真的很上进4 分钟前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web1309332039810 分钟前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_23431 分钟前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
源码哥_博纳软云1 小时前
JAVA同城服务场馆门店预约系统支持H5小程序APP源码
java·开发语言·微信小程序·小程序·微信公众平台
如若1231 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
洗发水很好用2 小时前
uniApp打包H5发布到服务器(docker)
uni-app
滚雪球~2 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语2 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport2 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg2 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全