Skip to content

Commit 17792b1

Browse files
mysqil-youximysqil-youxi
committed
更新版本号
1 parent caf2b39 commit 17792b1

8 files changed

Lines changed: 120 additions & 57 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "mizuki",
33
"type": "module",
4-
"version": "3.6",
4+
"version": "3.7",
55
"scripts": {
66
"dev": "astro dev",
77
"start": "astro dev",

‎src/components/Footer.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ if (footerConfig.enable) {
3838
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a><br>
3939
Powered by
4040
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
41-
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">Mizuki</a>&nbsp; Version <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">3.5<br>
41+
<a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">Mizuki</a>&nbsp; Version <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">3.7<br>
4242

4343

4444
</div>

‎src/components/widget/TranslateButton.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,9 +154,10 @@ onDestroy(() => {
154154
opacity: 0;
155155
pointer-events: none;
156156
transform: translateY(-10px);
157+
transition: all 0.2s ease-out;
157158
}
158159
159-
.float-panel-closed:not(.float-panel-closed) {
160+
#translate-panel:not(.float-panel-closed) {
160161
opacity: 1;
161162
pointer-events: auto;
162163
transform: translateY(0);

‎src/layouts/Layout.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const bannerOffset =
113113
---
114114

115115
<!DOCTYPE html>
116-
<html lang={siteLang} class="bg-[var(--page-bg)] transition text-[14px] md:text-[16px]"
116+
<html lang={siteLang} class="bg-[var(--page-bg)] text-[14px] md:text-[16px]"
117117
data-overlayscrollbars-initialize
118118
>
119119
<head>
@@ -190,7 +190,7 @@ const bannerOffset =
190190

191191

192192
</head>
193-
<body class=" min-h-screen transition " class:list={[{"lg:is-home": isHomePage, "enable-banner": enableBanner}]}
193+
<body class=" min-h-screen " class:list={[{"lg:is-home": isHomePage, "enable-banner": enableBanner}]}
194194
data-overlayscrollbars-initialize
195195
>
196196
<!-- 页面顶部渐变高光效果 - 只在full和semifull模式下显示 -->

‎src/layouts/MainGridLayout.astro‎

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -244,14 +244,15 @@ const mainContentClass = `
244244
)}
245245

246246
<!-- Water waves effect -->
247-
<div class="waves absolute -bottom-[1px] h-[10vh] max-h-[9.375rem] min-h-[3.125rem] w-full md:h-[15vh]" id="header-waves">
247+
<div class="waves absolute -bottom-[1px] h-[10vh] max-h-[9.375rem] min-h-[3.125rem] w-full md:h-[15vh]" id="header-waves" style="transform: translateZ(0); will-change: fill;">
248248
<svg
249249
class="waves"
250250
xmlns="http://www.w3.org/2000/svg"
251251
xmlns:xlink="http://www.w3.org/1999/xlink"
252252
viewBox="0 20 150 32"
253253
preserveAspectRatio="none"
254254
shape-rendering="auto"
255+
style="transform: translateZ(0); backface-visibility: hidden;"
255256
>
256257
<defs>
257258
<path
@@ -260,34 +261,34 @@ const mainContentClass = `
260261
>
261262
</path>
262263
</defs>
263-
<g class="parallax">
264+
<g class="parallax" style="transform: translateZ(0);">
264265
<use
265266
xlink:href="#gentle-wave"
266267
x="48"
267268
y="0"
268269
class="opacity-25 fill-[var(--page-bg)]"
269-
style="animation-delay: -2s; animation-duration: 7s;"
270+
style="animation-delay: -2s; animation-duration: 7s; will-change: transform;"
270271
></use>
271272
<use
272273
xlink:href="#gentle-wave"
273274
x="48"
274275
y="3"
275276
class="opacity-50 fill-[var(--page-bg)]"
276-
style="animation-delay: -3s; animation-duration: 10s;"
277+
style="animation-delay: -3s; animation-duration: 10s; will-change: transform;"
277278
></use>
278279
<use
279280
xlink:href="#gentle-wave"
280281
x="48"
281282
y="5"
282283
class="opacity-75 fill-[var(--page-bg)]"
283-
style="animation-delay: -4s; animation-duration: 13s;"
284+
style="animation-delay: -4s; animation-duration: 13s; will-change: transform;"
284285
></use>
285286
<use
286287
xlink:href="#gentle-wave"
287288
x="48"
288289
y="7"
289290
class="fill-[var(--page-bg)]"
290-
style="animation-delay: -5s; animation-duration: 20s;"
291+
style="animation-delay: -5s; animation-duration: 20s; will-change: transform;"
291292
></use>
292293
</g>
293294
</svg>
@@ -891,15 +892,49 @@ const mainContentClass = `
891892
/* 水波纹显示优化 */
892893
.waves {
893894
/* 确保水波纹完整显示 */
894-
overflow: visible !important;
895+
overflow: visible;
895896
z-index: 5;
897+
/* 硬件加速，确保与背景同步渲染 */
898+
transform: translateZ(0);
899+
will-change: transform;
900+
/* 确保与页面背景在同一合成层 */
901+
contain: layout style paint;
896902
}
897903

898904
.waves svg {
899905
/* 确保SVG完整渲染 */
900906
width: 100%;
901907
height: 100%;
902908
display: block;
909+
/* SVG硬件加速 */
910+
transform: translateZ(0);
911+
backface-visibility: hidden;
912+
}
913+
914+
/* 波浪填充色主题切换优化 */
915+
.waves use {
916+
/* 确保填充色与页面背景同步更新 */
917+
will-change: fill;
918+
}
919+
920+
/* 波浪与背景同步切换优化 - 解决交界线闪烁 */
921+
#header-waves {
922+
/* 确保波浪容器与页面背景在同一合成层 */
923+
isolation: isolate;
924+
/* 强制重绘，确保与body背景同步 */
925+
contain: layout style paint;
926+
/* 精确对齐 */
927+
margin-bottom: -1px;
928+
}
929+
930+
/* 主题切换时的额外保护 */
931+
.theme-changing #header-waves,
932+
.theme-changing #header-waves svg,
933+
.theme-changing #header-waves use {
934+
/* 在主题切换期间禁用所有可能的渲染延迟 */
935+
will-change: auto;
936+
transform: translateZ(0);
937+
backface-visibility: hidden;
903938
}
904939

905940
/* 移动端水波纹特殊优化 */

‎src/styles/main.css‎

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,28 @@ html {
2626
}
2727

2828
@layer components {
29+
/* 主题切换防闪烁类 - 临时禁用所有过渡 */
30+
.theme-changing *,
31+
.theme-changing *::before,
32+
.theme-changing *::after {
33+
transition: none !important;
34+
animation-duration: 0s !important;
35+
}
36+
37+
/* 特别保护波浪效果SVG填充色 */
38+
.theme-changing svg,
39+
.theme-changing svg *,
40+
.theme-changing .waves,
41+
.theme-changing .waves * {
42+
transition: none !important;
43+
animation-duration: 0s !important;
44+
}
45+
2946
.card-base {
30-
@apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
47+
@apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition-colors duration-150;
3148
}
3249
h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
33-
@apply transition;
50+
@apply transition-colors duration-150;
3451
}
3552
.card-shadow {
3653
@apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
@@ -40,13 +57,13 @@ html {
4057
before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10
4158
}
4259
.link {
43-
@apply transition rounded-md p-1 -m-1 expand-animation;
60+
@apply transition-colors duration-150 rounded-md p-1 -m-1 expand-animation;
4461
}
4562
.link-lg {
46-
@apply transition rounded-md p-1.5 -m-1.5 expand-animation;
63+
@apply transition-colors duration-150 rounded-md p-1.5 -m-1.5 expand-animation;
4764
}
4865
.float-panel {
49-
@apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
66+
@apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition-colors duration-150 shadow-xl dark:shadow-none
5067
}
5168
.float-panel-closed {
5269
@apply -translate-y-1 opacity-0 pointer-events-none
@@ -56,14 +73,14 @@ html {
5673
}
5774

5875
.btn-card {
59-
@apply transition flex items-center justify-center bg-[var(--card-bg)] hover:bg-[var(--btn-card-bg-hover)]
76+
@apply transition-colors duration-150 flex items-center justify-center bg-[var(--card-bg)] hover:bg-[var(--btn-card-bg-hover)]
6077
active:bg-[var(--btn-card-bg-active)]
6178
}
6279
.btn-card.disabled {
6380
@apply pointer-events-none text-black/10 dark:text-white/10
6481
}
6582
.btn-plain {
66-
@apply transition relative flex items-center justify-center bg-none
83+
@apply transition-colors duration-150 relative flex items-center justify-center bg-none
6784
text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
6885
&:not(.scale-animation) {
6986
@apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]
@@ -73,12 +90,12 @@ html {
7390
}
7491
}
7592
.btn-regular {
76-
@apply transition flex items-center justify-center bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)]
93+
@apply transition-colors duration-150 flex items-center justify-center bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)]
7794
text-[var(--btn-content)] dark:text-white/75
7895
}
7996

8097
.link-underline {
81-
@apply transition underline decoration-2 decoration-dashed decoration-[var(--link-underline)]
98+
@apply transition-colors duration-150 underline decoration-2 decoration-dashed decoration-[var(--link-underline)]
8299
hover:decoration-[var(--link-hover)] active:decoration-[var(--link-active)] underline-offset-[0.25rem]
83100
}
84101

@@ -184,12 +201,12 @@ html {
184201
}
185202

186203
.meta-icon {
187-
@apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)]
204+
@apply w-8 h-8 transition-colors duration-150 rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)]
188205
text-[var(--btn-content)] mr-2
189206
}
190207
.with-divider {
191208
@apply before:content-['/'] before:ml-1.5 before:mr-1.5 before:text-[var(--meta-divider)] before:text-sm
192-
before:font-medium before:first-of-type:hidden before:transition
209+
before:font-medium before:first-of-type:hidden before:transition-colors before:duration-150
193210
}
194211

195212
.btn-regular-dark {

‎src/styles/transition.css‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* Page transition animations with Swup */
22
html.is-changing .transition-swup-fade {
3-
@apply transition-all duration-200
3+
@apply transition-all duration-150
44
}
55
html.is-animating .transition-swup-fade {
66
@apply opacity-0 translate-y-4
@@ -18,36 +18,35 @@ html.is-animating .transition-swup-fade {
1818
}
1919
}
2020

21-
/* Main components - 减少动画延迟提升性能 */
21+
/* Main components - 统一动画时长为150ms，与主题切换保持一致 */
2222
.onload-animation {
2323
opacity: 0;
2424
animation: 150ms fade-in-up;
2525
animation-fill-mode: forwards;
2626
}
2727
#navbar {
28-
animation-delay: 0ms
28+
animation-delay: 20ms
2929
}
3030
#sidebar {
31-
animation-delay: 0ms
31+
animation-delay: 40ms
3232
}
3333
#swup-container {
3434
outline: none;
3535
}
3636
#content-wrapper {
37-
animation-delay: 0ms;
37+
animation-delay: 60ms;
3838
}
3939
.footer {
40-
animation-delay: 0ms;
40+
animation-delay: 80ms;
4141
}
4242
#banner-credit {
43-
animation-delay: 0ms;
43+
animation-delay: 100ms;
4444
}
4545

46-
/* Post content - 简化动画延迟 */
46+
/* Post content - 优化动画层次，提升视觉体验 */
4747
#post-container :nth-child(1) { animation-delay: 0ms }
48-
#post-container :nth-child(2) { animation-delay: 0ms }
49-
#post-container :nth-child(3) { animation-delay: 0ms }
50-
#post-container :nth-child(4) { animation-delay: 0ms }
51-
#post-container :nth-child(5) { animation-delay: 0ms }
52-
#post-container :nth-child(6) { animation-delay: 0ms }
53-
48+
#post-container :nth-child(2) { animation-delay: 20ms }
49+
#post-container :nth-child(3) { animation-delay: 40ms }
50+
#post-container :nth-child(4) { animation-delay: 60ms }
51+
#post-container :nth-child(5) { animation-delay: 80ms }
52+
#post-container :nth-child(6) { animation-delay: 100ms }

‎src/utils/setting-utils.ts‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
DARK_MODE,
44
DEFAULT_THEME,
55
LIGHT_MODE,
6-
} from "@constants/constants.ts";
6+
} from "@constants/constants";
77
import { expressiveCodeConfig } from "@/config";
88
import type { LIGHT_DARK_MODE } from "@/types/config";
99

@@ -28,27 +28,38 @@ export function setHue(hue: number): void {
2828
}
2929

3030
export function applyThemeToDocument(theme: LIGHT_DARK_MODE) {
31-
switch (theme) {
32-
case LIGHT_MODE:
33-
document.documentElement.classList.remove("dark");
34-
break;
35-
case DARK_MODE:
36-
document.documentElement.classList.add("dark");
37-
break;
38-
case AUTO_MODE:
39-
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
40-
document.documentElement.classList.add("dark");
41-
} else {
31+
// 添加防闪烁类，禁用所有过渡
32+
document.documentElement.classList.add('theme-changing');
33+
34+
// 使用 requestAnimationFrame 确保 DOM 更新的时序
35+
requestAnimationFrame(() => {
36+
switch (theme) {
37+
case LIGHT_MODE:
4238
document.documentElement.classList.remove("dark");
43-
}
44-
break;
45-
}
39+
break;
40+
case DARK_MODE:
41+
document.documentElement.classList.add("dark");
42+
break;
43+
case AUTO_MODE:
44+
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
45+
document.documentElement.classList.add("dark");
46+
} else {
47+
document.documentElement.classList.remove("dark");
48+
}
49+
break;
50+
}
4651

47-
// Set the theme for Expressive Code
48-
document.documentElement.setAttribute(
49-
"data-theme",
50-
expressiveCodeConfig.theme,
51-
);
52+
// Set the theme for Expressive Code
53+
document.documentElement.setAttribute(
54+
"data-theme",
55+
expressiveCodeConfig.theme,
56+
);
57+
58+
// 在下一帧移除防闪烁类，恢复过渡效果
59+
requestAnimationFrame(() => {
60+
document.documentElement.classList.remove('theme-changing');
61+
});
62+
});
5263
}
5364

5465
export function setTheme(theme: LIGHT_DARK_MODE): void {

0 commit comments

Comments
 (0)