cirry/simple-element-plus-template
1
0
Fork 0
mirror of https://github.com/fugary/simple-element-plus-template.git synced 2026-09-11 09:23:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

opt: 优化主题切换动画效果，防止出现动画断层

Browse Source
This commit is contained in:
gary.fu
2026-09-09 15:00:40 +08:00
parent 975b6f08a0
commit a788c09c50
2 changed files with 40 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/assets/main.css
View File

@@ -546,27 +546,56 @@ body,
position: unset;
}
/* Theme transition animation (from Element Plus) */
/* Theme transition animation */
:root {
--theme-x: 50%;
--theme-y: 50%;
--theme-r: 1500px;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
/* 切换浅色（变白）：新视图在顶层，从点击位置展开 */
::view-transition-old(root) {
z-index: 1;
}
::view-transition-new(root) {
z-index: 2147483646;
animation: switch-to-light 400ms ease-in-out forwards;
}
/* 切换深色（变黑）：旧视图在顶层，向点击位置收缩 */
.dark::view-transition-old(root) {
z-index: 2147483646;
animation: switch-to-dark 400ms ease-in-out forwards;
}
.dark::view-transition-new(root) {
z-index: 1;
animation: none;
}
@keyframes switch-to-light {
from {
clip-path: circle(0px at var(--theme-x) var(--theme-y));
}
to {
clip-path: circle(var(--theme-r) at var(--theme-x) var(--theme-y));
}
}
@keyframes switch-to-dark {
from {
clip-path: circle(var(--theme-r) at var(--theme-x) var(--theme-y));
}
to {
clip-path: circle(0px at var(--theme-x) var(--theme-y));
}
}
/* 整体编辑器区域 */