diff --git a/client/src/styles/pptPreview.css b/client/src/styles/pptPreview.css index e2e98f9..c34ed6a 100644 --- a/client/src/styles/pptPreview.css +++ b/client/src/styles/pptPreview.css @@ -10,6 +10,11 @@ --ppt-border: rgba(0, 0, 0, 0.08); --ppt-chrome-h: 8.5rem; --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 { @@ -123,7 +128,7 @@ padding: clamp(1.25rem, 2.5vh, 2.5rem) clamp(1.25rem, 3vw, 2rem); box-sizing: border-box; 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 { @@ -168,9 +173,9 @@ flex-shrink: 0; margin-bottom: 1rem; transition: - transform 0.5s var(--ppt-ease-soft), - opacity 0.5s var(--ppt-ease-soft), - margin 0.5s var(--ppt-ease-soft); + transform var(--ppt-duration-layout) var(--ppt-ease-soft), + opacity var(--ppt-duration-layout) var(--ppt-ease-soft), + margin var(--ppt-duration-layout) var(--ppt-ease-soft); } .ppt-slide-section-header--top { @@ -214,7 +219,7 @@ font-weight: 700; margin: 0 0 0.5rem; 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 { @@ -383,21 +388,25 @@ /* 内容块揭示动画 */ .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 { - 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 { opacity: 0; - transform: translateY(6px); + transform: translateY(var(--ppt-reveal-offset)); } .ppt-reveal-leave-to { opacity: 0; - transform: translateY(-4px); + transform: translateY(calc(var(--ppt-reveal-offset) * -0.67)); } /* 幻灯片切换动画(crossfade 重叠) */ @@ -405,7 +414,9 @@ .ppt-slide-leave-active, .ppt-slide-back-enter-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; inset: 0; width: 100%;