Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

Make page transitions only animate after navigation, not on initial load

Browse Source
This commit is contained in:
Joseph.Rawlings
2026-02-01 15:35:34 -05:00
parent 759afa54ac
commit 41ed9eb62d
1 changed files with 45 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1599,14 +1599,19 @@
<div class="mb-10 mt-3"> <div class="mb-10 mt-3">
<style> <style>
/* Page Transition Styles */ /* Page Transition Styles */
.proxmox-page-content { .proxmox-page-wrapper {
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; opacity: 1;
transform: translateX(0);
}
.proxmox-page-wrapper.slide-in {
animation: slideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
} }
@keyframes slideIn { @keyframes slideIn {
from { from {
opacity: 0; opacity: 0;
transform: translateX(20px); transform: translateX(16px);
} }
to { to {
opacity: 1; opacity: 1;
@@ -1621,18 +1626,20 @@
} }
to { to {
opacity: 0; opacity: 0;
transform: translateX(-20px); transform: translateX(-16px);
} }
} }
.proxmox-page-exit { .proxmox-page-wrapper.slide-out {
animation: slideOut 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards; 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-content, .proxmox-page-wrapper.slide-in,
.proxmox-page-exit { .proxmox-page-wrapper.slide-out {
animation: none; animation: none;
opacity: 1;
transform: none;
} }
} }
@@ -2347,7 +2354,7 @@
</div> </div>
</div> </div>
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<div class="flex-1 flex flex-col proxmox-page-content" wire:key="proxmox-page-{{ $view }}"> <div class="flex-1 flex flex-col proxmox-page-wrapper" wire:key="proxmox-page-{{ $view }}">
{{ $slot }} {{ $slot }}
</div> </div>
</div> </div>
@@ -3258,11 +3265,34 @@ window.saveServerIcon = function() {
}; };
// Page transition handling for Livewire navigation // Page transition handling for Livewire navigation
document.addEventListener('livewire:navigate', () => { (function() {
const pageContent = document.querySelector('.proxmox-page-content'); let isNavigating = false;
if (pageContent) {
pageContent.classList.remove('proxmox-page-content'); // Trigger slide-out when starting navigation
pageContent.classList.add('proxmox-page-exit'); document.addEventListener('livewire:navigate', () => {
} isNavigating = 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
document.addEventListener('livewire:navigated', () => {
if (isNavigating) {
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 });
}
});
isNavigating = false;
}
});
})();
</script> </script>