Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix page transition: only slide-in new content after it loads

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-02-01 15:42:59 -05:00
parent 41ed9eb62d
commit 19ccfaa27f
1 changed files with 21 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
extensions/Servers/Proxmox/views/components/layout.blade.php
View File

@@ -1598,20 +1598,20 @@
<div class="mb-10 mt-3">
<style>
/* Page Transition Styles */
/* Page Transition Styles - Only slide-in for new content */
.proxmox-page-wrapper {
opacity: 1;
transform: translateX(0);
}
.proxmox-page-wrapper.slide-in {
animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
animation: slideIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(16px);
transform: translateX(20px);
}
to {
opacity: 1;
@@ -1619,24 +1619,8 @@
}
}
@keyframes slideOut {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(-16px);
}
}
.proxmox-page-wrapper.slide-out {
animation: slideOut 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
.proxmox-page-wrapper.slide-in,
.proxmox-page-wrapper.slide-out {
.proxmox-page-wrapper.slide-in {
animation: none;
opacity: 1;
transform: none;
@@ -3266,32 +3250,30 @@ window.saveServerIcon = function() {
// Page transition handling for Livewire navigation
(function() {
let isNavigating = false;
let hasNavigated = false;
// Trigger slide-out when starting navigation
// Mark that navigation has started (but don't animate yet)
document.addEventListener('livewire:navigate', () => {
isNavigating = true;
const pageWrapper = document.querySelector('.proxmox-page-wrapper');
if (pageWrapper) {
pageWrapper.classList.add('slide-out');
}
hasNavigated = true;
});
// Trigger slide-in after navigation completes and page is loaded
// Only animate AFTER the new page content is fully loaded and swapped in
document.addEventListener('livewire:navigated', () => {
if (isNavigating) {
if (hasNavigated) {
// Use double requestAnimationFrame to ensure DOM is fully updated
requestAnimationFrame(() => {
const pageWrapper = document.querySelector('.proxmox-page-wrapper');
if (pageWrapper) {
pageWrapper.classList.remove('slide-out');
pageWrapper.classList.add('slide-in');
// Clean up class after animation
pageWrapper.addEventListener('animationend', () => {
pageWrapper.classList.remove('slide-in');
}, { once: true });
}
requestAnimationFrame(() => {
const pageWrapper = document.querySelector('.proxmox-page-wrapper');
if (pageWrapper) {
// Apply slide-in to reveal the NEW content
pageWrapper.classList.add('slide-in');
pageWrapper.addEventListener('animationend', () => {
pageWrapper.classList.remove('slide-in');
}, { once: true });
}
});
});
isNavigating = false;
hasNavigated = false;
}
});
})();