feat(theme-transition): 内置主题过渡预设并修复资源释放 - #1104
Merged
Merged
Conversation
🦋 Changeset detectedLatest 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
变更说明
theme-transition新增circle、fade、wipe、slide四种内置动画预设,通过新增的preset选项选择;circle仍为默认值,保持现有调用兼容。duration和easing覆盖;不开放自定义 keyframe 回调。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 选择器和既有默认效果均保持兼容。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 lintpnpm --filter theme-transition buildpnpm --filter theme-transition tsdpnpm --filter @weapp-tailwindcss/website typecheckpnpm --filter @weapp-tailwindcss/website build:中英文生产构建通过localStorage一致,data-theme-transition、data-theme-transition-preset均已清理,View Transition 伪元素动画数为 0Related to #1102