侧滑菜单透明渐变需手动实现：监听 touchmove 获取偏移量，计算归一化进度并动态设置遮罩层 opacity 或背景色 alpha 值；禁用页面滚动，避免文字透明，安卓 iOS 渲染差异需加 will-change: transform；小程序优先用 background-color 渐变保流畅。
侧滑菜单本身不支持透明渐变，得自己画
uni-app 的 uni-drawer 或原生 swiper + view 实现的侧滑菜单，默认没有透明度随位移变化的内置能力。所谓“透明渐变”，本质是监听滑动偏移量（transformX），动态设置遮罩层或菜单容器的 opacity 和/或背景色的 alpha 值。别指望组件自动帮你算这个过渡曲线。
用 touchmove + transform 手动控制 opacity
推荐在自定义 drawer 组件中监听手指拖拽过程，通过 touchstart/touchmove 获取实时 clientX，结合菜单最大展开宽度（比如 240px）计算归一化进度：progress = Math.abs(offsetX) / 240，再映射为 opacity（0 → 1）和背景色透明度（如 rgba(0,0,0,0.5 * progress)）。注意两点：
- 必须禁用页面滚动：在
touchmove中调用event.preventDefault()，否则 iOS 下会触发 body 滚动干扰手势 - 不要直接用
opacity控制整个菜单——会导致内部文字/按钮也变透明；应该只作用于遮罩层（mask）和菜单背景色 - 安卓和 iOS 对
transform: translateX()的渲染性能差异大，建议加style="will-change: transform;"提升流畅度
uni.createAnimation 不适合做实时渐变
很多人想用 uni.createAnimation 配合 step 实现，但这是个误区：createAnimation 是离散帧动画，无法响应每帧 touch 位移。它只适合“打开/关闭”两个状态间的补间，不适合滑动过程中持续变化的透明度。真要平滑响应，必须走 requestAnimationFrame + 手动更新 style，或者用 css variable + transform 驱动（需 H5 平台支持）。
小程序平台下 background-color 渐变更可靠
微信小程序对 opacity 动态修改有明显卡顿，尤其在低端机上。实测更稳的方式是：固定遮罩层 opacity: 1，改它的 background-color，例如从 rgba(0,0,0,0) 到 rgba(0,0,0,0.6)。同时菜单背景用 linear-gradient 搭配透明色（如 background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.1))），这样视觉上才有“边缘淡入”感。H5 和 App 平台可两者并用，小程序优先保流畅性。
真正难的不是写几行代码，而是让不同平台下的拖拽响应延迟、回弹阻尼、透明度映射曲线都看起来自然——这些细节没标准答案，得靠真机反复调 progress 映射函数，比如用 Math.pow(progress, 0.8) 让起始阶段更敏感。
