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"> <div class="mb-10 mt-3">
<style> <style>
/* Page Transition Styles */ /* Page Transition Styles - Only slide-in for new content */
.proxmox-page-wrapper { .proxmox-page-wrapper {
opacity: 1; opacity: 1;
transform: translateX(0); transform: translateX(0);
} }
.proxmox-page-wrapper.slide-in { .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 { @keyframes slideIn {
from { from {
opacity: 0; opacity: 0;
transform: translateX(16px); transform: translateX(20px);
} }
to { to {
opacity: 1; 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) { @media (prefers-reduced-motion: reduce) {
.proxmox-page-wrapper.slide-in, .proxmox-page-wrapper.slide-in {
.proxmox-page-wrapper.slide-out {
animation: none; animation: none;
opacity: 1; opacity: 1;
transform: none; transform: none;
@@ -3266,32 +3250,30 @@ window.saveServerIcon = function() {
// Page transition handling for Livewire navigation // Page transition handling for Livewire navigation
(function() { (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', () => { document.addEventListener('livewire:navigate', () => {
isNavigating = true; hasNavigated = true;
const pageWrapper = document.querySelector('.proxmox-page-wrapper');
if (pageWrapper) {
pageWrapper.classList.add('slide-out');
}
}); });
// 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', () => { document.addEventListener('livewire:navigated', () => {
if (isNavigating) { if (hasNavigated) {
// Use double requestAnimationFrame to ensure DOM is fully updated
requestAnimationFrame(() => { requestAnimationFrame(() => {
const pageWrapper = document.querySelector('.proxmox-page-wrapper'); requestAnimationFrame(() => {
if (pageWrapper) { const pageWrapper = document.querySelector('.proxmox-page-wrapper');
pageWrapper.classList.remove('slide-out'); if (pageWrapper) {
pageWrapper.classList.add('slide-in'); // Apply slide-in to reveal the NEW content
// Clean up class after animation pageWrapper.classList.add('slide-in');
pageWrapper.addEventListener('animationend', () => { pageWrapper.addEventListener('animationend', () => {
pageWrapper.classList.remove('slide-in'); pageWrapper.classList.remove('slide-in');
}, { once: true }); }, { once: true });
} }
});
}); });
isNavigating = false; hasNavigated = false;
} }
}); });
})(); })();