Skip to content

feat(theme-transition): 内置主题过渡预设并修复资源释放 - #1104

Merged
sonofmagic merged 7 commits into
mainfrom
codex/fix-theme-transition-resource-release
Aug 22, 2026
Merged

feat(theme-transition): 内置主题过渡预设并修复资源释放#1104
sonofmagic merged 7 commits into
mainfrom
codex/fix-theme-transition-resource-release

Conversation

@sonofmagic

@sonofmagic sonofmagic commented Aug 22, 2026

Copy link
Copy Markdown
Owner

变更说明

  • theme-transition 新增 circlefadewipeslide 四种内置动画预设,通过新增的 preset 选项选择;circle 仍为默认值,保持现有调用兼容。
  • 每个 preset 提供独立默认 timing,调用方仍可通过 durationeasing 覆盖;不开放自定义 keyframe 回调。
  • 同步 Tailwind 插件、SCSS mixin 和静态 CSS 的首帧状态,并通过内部 data-theme-transition-preset 标识当前效果。
  • 官网改用 fade,实际动画为 240ms + ease-in-out 的 opacity 淡入淡出,不再依赖点击圆心。
  • 保留 fill: forwards,在 View Transition 完成后显式取消 WAAPI 动画;两个过渡属性和 CSS 自定义变量均在完成或异常后清理。
  • 精确 (0, 0) 的键盘或程序化激活继续直接切换主题;单轴为零的边缘坐标仍有效。

兼容与发布

  • 新增导出类型 ThemeTransitionPreset = "circle" | "fade" | "wipe" | "slide",以及 UseToggleThemeOptions.preset?
  • 原有调用默认使用 circle,公开类型、CSS 选择器和既有默认效果均保持兼容。
  • 保留现有中文 patch change intent 记录资源释放与无指针降级,另加中文 minor change intent 记录公开 preset 能力。
  • 不需要联动 create-weapp-vite,因为本次只修改独立运行时包与官网接入。

根因与处理

#1102 为修复圆形动画收尾闪烁加入 fill: forwards,但结束后动画会继续占用 View Transition 快照资源。本 PR 在 transition.finished 后调用 Animation.cancel() 完成释放。

官网此前的圆形效果持续给人起点偏移的视觉感受。官网现改用不具备空间圆心语义的柔和 fade;圆形效果仍作为库默认 preset 提供给需要从指针位置扩张或收缩的调用方。

本地验证

  • pnpm --filter theme-transition test:6 个测试文件、51 个测试通过
  • pnpm --filter theme-transition lint
  • pnpm --filter theme-transition build
  • pnpm --filter theme-transition tsd
  • 网站定向 ESLint
  • pnpm --filter @weapp-tailwindcss/website typecheck
  • pnpm --filter @weapp-tailwindcss/website build:中英文生产构建通过
  • 系统 Chrome 定向 E2E:5 个用例通过,覆盖 fade 双向关键帧、无指针降级、快速双击、20 次连续切换和资源清理
  • 系统 Chrome 压力验证:连续真实点击 100 次后页面保持响应,主题与 localStorage 一致,data-theme-transitiondata-theme-transition-preset 均已清理,View Transition 伪元素动画数为 0

Related to #1102

@changeset-bot

changeset-bot Bot commented Aug 22, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b6acb9d

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@sonofmagic sonofmagic changed the title fix(theme-transition): 释放主题过渡动画资源 fix(theme-transition): 释放动画资源并固定主题切换圆心 Aug 22, 2026
@sonofmagic sonofmagic changed the title fix(theme-transition): 释放动画资源并固定主题切换圆心 fix(theme-transition): 释放主题过渡动画资源 Aug 22, 2026
@sonofmagic sonofmagic changed the title fix(theme-transition): 释放主题过渡动画资源 fix(theme-transition): 修复主题过渡资源释放与动画起点 Aug 22, 2026
@sonofmagic sonofmagic changed the title fix(theme-transition): 修复主题过渡资源释放与动画起点 feat(theme-transition): 内置主题过渡预设并修复资源释放 Aug 22, 2026
@sonofmagic
sonofmagic merged commit cbeb7b9 into main Aug 22, 2026
41 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant