fix: refine iframe transition timing and default values
- 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 <noreply@anthropic.com>
This commit is contained in:
parent
a934736e2c
commit
ca95546180
2 changed files with 6 additions and 4 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue