优化页面、修复BUG

This commit is contained in:
李琦
2026-07-12 10:03:04 +08:00
parent 1d4baf02b5
commit 9a666b9103

View File

@@ -10,6 +10,11 @@
--ppt-border: rgba(0, 0, 0, 0.08); --ppt-border: rgba(0, 0, 0, 0.08);
--ppt-chrome-h: 8.5rem; --ppt-chrome-h: 8.5rem;
--ppt-ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --ppt-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
--ppt-duration-reveal: 0.95s;
--ppt-duration-reveal-leave: 0.65s;
--ppt-duration-slide: 0.85s;
--ppt-duration-layout: 0.75s;
--ppt-reveal-offset: 10px;
} }
.ppt-preview-root.ppt-theme-dark { .ppt-preview-root.ppt-theme-dark {
@@ -123,7 +128,7 @@
padding: clamp(1.25rem, 2.5vh, 2.5rem) clamp(1.25rem, 3vw, 2rem); padding: clamp(1.25rem, 2.5vh, 2.5rem) clamp(1.25rem, 3vw, 2rem);
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
transition: padding 0.5s var(--ppt-ease-soft); transition: padding var(--ppt-duration-layout) var(--ppt-ease-soft);
} }
.ppt-viewer--fullscreen .ppt-slide-canvas { .ppt-viewer--fullscreen .ppt-slide-canvas {
@@ -168,9 +173,9 @@
flex-shrink: 0; flex-shrink: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
transition: transition:
transform 0.5s var(--ppt-ease-soft), transform var(--ppt-duration-layout) var(--ppt-ease-soft),
opacity 0.5s var(--ppt-ease-soft), opacity var(--ppt-duration-layout) var(--ppt-ease-soft),
margin 0.5s var(--ppt-ease-soft); margin var(--ppt-duration-layout) var(--ppt-ease-soft);
} }
.ppt-slide-section-header--top { .ppt-slide-section-header--top {
@@ -214,7 +219,7 @@
font-weight: 700; font-weight: 700;
margin: 0 0 0.5rem; margin: 0 0 0.5rem;
color: var(--ppt-text); color: var(--ppt-text);
transition: font-size 0.5s var(--ppt-ease-soft); transition: font-size var(--ppt-duration-layout) var(--ppt-ease-soft);
} }
.ppt-slide-section-accent { .ppt-slide-section-accent {
@@ -383,21 +388,25 @@
/* 内容块揭示动画 */ /* 内容块揭示动画 */
.ppt-reveal-enter-active { .ppt-reveal-enter-active {
transition: opacity 0.5s var(--ppt-ease-soft), transform 0.5s var(--ppt-ease-soft); transition:
opacity var(--ppt-duration-reveal) var(--ppt-ease-soft),
transform var(--ppt-duration-reveal) var(--ppt-ease-soft);
} }
.ppt-reveal-leave-active { .ppt-reveal-leave-active {
transition: opacity 0.35s var(--ppt-ease-soft), transform 0.35s var(--ppt-ease-soft); transition:
opacity var(--ppt-duration-reveal-leave) var(--ppt-ease-soft),
transform var(--ppt-duration-reveal-leave) var(--ppt-ease-soft);
} }
.ppt-reveal-enter-from { .ppt-reveal-enter-from {
opacity: 0; opacity: 0;
transform: translateY(6px); transform: translateY(var(--ppt-reveal-offset));
} }
.ppt-reveal-leave-to { .ppt-reveal-leave-to {
opacity: 0; opacity: 0;
transform: translateY(-4px); transform: translateY(calc(var(--ppt-reveal-offset) * -0.67));
} }
/* 幻灯片切换动画crossfade 重叠) */ /* 幻灯片切换动画crossfade 重叠) */
@@ -405,7 +414,9 @@
.ppt-slide-leave-active, .ppt-slide-leave-active,
.ppt-slide-back-enter-active, .ppt-slide-back-enter-active,
.ppt-slide-back-leave-active { .ppt-slide-back-leave-active {
transition: opacity 0.55s var(--ppt-ease-soft), transform 0.55s var(--ppt-ease-soft); transition:
opacity var(--ppt-duration-slide) var(--ppt-ease-soft),
transform var(--ppt-duration-slide) var(--ppt-ease-soft);
position: absolute; position: absolute;
inset: 0; inset: 0;
width: 100%; width: 100%;