Repository navigation
feat: 添加共享元素过渡与减弱动画设置 - #392
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
歌词就绪时序、返回封面匹配、减弱动画降级及图片失败兜底仍有需要修复的问题。
5 open issues
1 file not reviewed
pnpm-lock.yaml: Generated file
What changed in this PR
本 PR 为播放器新增封面共享元素过渡，并将减弱动画设置接入现有界面与系统偏好。
改动：
- 支持列表到详情页、底栏到全屏播放器的封面过渡
- 新增动画设置及降级样式，调整歌词与可视化初始化时序
- 补充导航回归测试，并升级 TypeScript
| File | Description |
|---|---|
| src/types/settings.ts | 添加动画设置类型 |
| src/styles/reduced-motion.css | 添加减弱动画样式 |
| src/styles/global.css | 引入动画降级样式 |
| src/stores/settings.ts | 合并用户与系统动画偏好 |
| src/settings/categories/appearance.ts | 新增动画设置分组 |
| src/services/playerTransition.ts | 管理播放器封面过渡 |
| src/services/coverTransition.ts | 管理详情导航封面匹配 |
| src/services/coverTransition.spec.ts | 添加导航过渡回归测试 |
| src/pages/Collection.vue | 接入头部摘要与共享封面 |
| src/pages/Artist.vue | 接入歌手摘要与共享头像 |
| src/layouts/MainLayout.vue | 协调路由、缓存与过渡生命周期 |
| src/i18n/locales/zh-CN.json | 添加中文设置文案 |
| src/i18n/locales/en-US.json | 添加英文设置文案 |
| src/directives/ripple.ts | 减弱动画时跳过涟漪 |
| src/core/hotkey/registry.ts | 快捷键接入播放器过渡 |
| src/components/ui/SToast.vue | 添加动画降级标记 |
| src/components/ui/STabs.vue | 调整面板过渡样式 |
| src/components/ui/SMarquee.vue | 按需启用合成优化 |
| src/components/ui/SImg.vue | 添加封面图片识别标记 |
| src/components/settings/SettingsSearch.vue | 添加动画降级标记 |
| src/components/player/TrackInfo.vue | 接入底栏封面过渡 |
| src/components/player/Lyrics/index.vue | 转发歌词就绪事件 |
| src/components/player/Lyrics/DefaultLyrics.vue | 首次布局后发送就绪事件 |
| src/components/player/Lyrics/DefaultLyrics.spec.ts | 调整测试组件注册 |
| src/components/player/Lyrics/AMLLLyrics.vue | 初始化后发送就绪事件 |
| src/components/player/FullPlayer/PlayerData.vue | 导航时通过过渡服务收起 |
| src/components/player/FullPlayer/PlayerCover.vue | 使用带缩略图兜底的封面 |
| src/components/player/FullPlayer/index.vue | 协调过渡与内容初始化 |
| src/components/list/CoverCard.vue | 捕获导航封面及摘要 |
| src/components/collection/DetailCover.vue | 新增解码后显示的封面组件 |
| src/App.vue | 同步全局减弱动画标记 |
| pnpm-lock.yaml | 同步 TypeScript 依赖解析 |
| package.json | 升级 TypeScript |
| components.d.ts | 更新组件与图标声明 |
Review effort: Balanced
| <div class="relative isolate overflow-hidden"> | ||
| <img | ||
| v-if="!loaded" | ||
| :src="fallback" |
Comment on lines
+95
to
+97
| if (!isPlayerExpanded.value) return; | ||
| lyricReady.value = true; | ||
| scheduleVisualizers(); |
Comment on lines
+115
to
118
| if (lyricReady.value) scheduleVisualizers(); | ||
| else if (!hasLyric.value) onLyricReady(); | ||
| }); | ||
| }; |
| const entering = to.fullPath === current.detailPath; | ||
| const cover = entering | ||
| ? scope?.querySelector<HTMLElement>("[data-cover-hero]") | ||
| : document.getElementById(current.coverId); |
Comment on lines
+3
to
+4
| transition-duration: 150ms; | ||
| transition-delay: 0s; |
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.
改动类型
是否包含破坏性变更
改动说明
基于 View Transitions API 添加封面级别的共享元素过渡：从列表卡片进入专辑 / 歌手详情、从底栏展开全屏播放器时，封面在两个页面之间连续过渡，返回时反向播放。过渡只作用于主内容区，其余路由保持原有切换动效。
同时新增「过渡与动画」设置分组，包含「共享元素过渡」和「减弱动画」两个开关，默认关闭。「减弱动画」会同时跟随系统
prefers-reduced-motion，开启后位移、缩放类动效统一降级为透明度过渡。关联 Issue
无
自查清单
pnpm format，并确认pnpm typecheck、pnpm lint通过pnpm build:native验证；未手写native/*/index.d.tsdev分支提交