From ca955461801923b65f701724599df1da1fc99b38 Mon Sep 17 00:00:00 2001 From: isUnknown Date: Fri, 5 Dec 2025 15:05:40 +0100 Subject: [PATCH] fix: refine iframe transition timing and default values MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Adjust transition duration to 200ms for smoother crossfade - Add explicit default values for iframe transform properties - Simplify transition with 'all' shorthand - Set explicit transition duration for editor panel 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/App.vue | 8 +++++--- src/components/editor/EditorPanel.vue | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/App.vue b/src/App.vue index 46e2de4..4441e9d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -113,7 +113,7 @@ const renderPreview = async (shouldReloadFromFile = false) => { // Swap current frame currentFrameIndex.value = currentFrameIndex.value === 1 ? 2 : 1; isTransitioning = false; - }, 100); // Match CSS transition duration + }, 200); // Match CSS transition duration }, 50); // Small delay to ensure scroll is set }, 200); // Wait for PagedJS }; @@ -158,8 +158,10 @@ onMounted(() => renderPreview(true)); width: 100vw; height: 100vh; border: none; - transition: opacity 0.1s ease-in-out, margin-left ease-in-out var(--curve), - transform ease-in-out var(--curve), height ease-in-out var(--curve); + margin-left: 0; + transform: scale(1) translateY(0); + height: 100vh; + transition: all 0.2s ease-in-out var(--curve); } .preview-frame.shifted { diff --git a/src/components/editor/EditorPanel.vue b/src/components/editor/EditorPanel.vue index 7741e0c..62f75a7 100644 --- a/src/components/editor/EditorPanel.vue +++ b/src/components/editor/EditorPanel.vue @@ -85,7 +85,7 @@ nav { background-color: var(--color-panel-bg); box-shadow: -5px 0px 12px; - transition: left ease-in-out var(--curve); + transition: left 0.3s var(--curve); } .tab-content.open {