Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki 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">
<style>
/* Page Transition Styles */
.proxmox-page-content {
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
.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;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(20px);
transform: translateX(16px);
}
to {
opacity: 1;
@@ -1621,18 +1626,20 @@
}
to {
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;
}
@media (prefers-reduced-motion: reduce) {
.proxmox-page-content,
.proxmox-page-exit {
.proxmox-page-wrapper.slide-in,
.proxmox-page-wrapper.slide-out {
animation: none;
opacity: 1;
transform: none;
}
}
@@ -2347,7 +2354,7 @@
</div>
</div>
<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 }}
</div>
</div>
@@ -3258,11 +3265,34 @@ window.saveServerIcon = function() {
};
// Page transition handling for Livewire navigation
document.addEventListener('livewire:navigate', () => {
const pageContent = document.querySelector('.proxmox-page-content');
if (pageContent) {
pageContent.classList.remove('proxmox-page-content');
pageContent.classList.add('proxmox-page-exit');
}
});
(function() {
let isNavigating = false;
// Trigger slide-out when starting navigation
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>