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

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