terrylee/star-cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[STYLE] 再度提升後台頁面轉場與登場 Loading 微動畫體驗

Browse Source 
1. 優化 components/loading-screen.blade.php：將 loading 狀態設為預設開啟，並利用 requestAnimationFrame 與延遲在 x-init 中自動淡出，實現更流暢的頁面進場登場動畫。
2. 優化 layouts/admin.blade.php：引入 .admin-content-shell 過渡容器與 .admin-page-transitioning 狀態，在點擊跳轉時使主內容漸變為半透明與微模糊，提供 SPA 級別的跳轉微過渡體驗。
3. 重構 layouts/admin.blade.php 跳轉載入命名：將全螢幕載入整合至頁面登場與內容過渡機制，防止重複點擊並解除事件衝突。
This commit is contained in:
sky121113 2026-06-01 10:11:08 +08:00
parent 610899d898
commit 5db796bf64
2 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
resources/views/components/loading-screen.blade.php
View File

@ -1,6 +1,16 @@
<div x-data="{
loading: false
loading: true,
hideAfterRender() {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
setTimeout(() => {
this.loading = false;
}, 220);
});
});
}
}"
x-init="hideAfterRender()"
x-on:show-global-loading.window="loading = true"
x-on:hide-global-loading.window="loading = false"
x-show="loading"
@ -10,9 +20,7 @@
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 z-[9999] flex items-center justify-center bg-slate-900/60 backdrop-blur-md"
style="display: none;"
x-cloak>
class="global-loading-screen fixed inset-0 z-[9999] flex items-center justify-center bg-slate-900/60 backdrop-blur-md">
<div class="relative flex flex-col items-center animate-luxury-in">
<!-- Logo with Spinner Animation -->
<div class="relative w-28 h-28 mb-10 flex items-center justify-center">

25
resources/views/layouts/admin.blade.php
View File

@ -33,6 +33,13 @@
};
window.applyAdminSidebarLayout(localStorage.getItem('sidebarCollapsed') === 'true');
</script>
<style>
html.admin-page-transitioning .admin-content-shell {
opacity: 0.45;
filter: blur(1px);
pointer-events: none;
}
</style>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
@ -57,13 +64,13 @@
<script>
(() => {
const topLoadingBar = () => document.getElementById('top-loading-bar');
const showPageLoading = () => {
topLoadingBar()?.classList.remove('loading');
window.dispatchEvent(new CustomEvent('show-global-loading'));
const showNavigationLoading = () => {
topLoadingBar()?.classList.add('loading');
document.documentElement.classList.add('admin-page-transitioning');
};
const hidePageLoading = () => {
const hideNavigationLoading = () => {
topLoadingBar()?.classList.remove('loading');
window.dispatchEvent(new CustomEvent('hide-global-loading'));
document.documentElement.classList.remove('admin-page-transitioning');
};
const shouldShowPageLoading = (event, link) => {
if (
@ -102,11 +109,11 @@
return;
}
showPageLoading();
showNavigationLoading();
});
window.addEventListener('beforeunload', showPageLoading);
window.addEventListener('pageshow', hidePageLoading);
window.addEventListener('beforeunload', showNavigationLoading);
window.addEventListener('pageshow', hideNavigationLoading);
})();
</script>
@ -495,7 +502,7 @@
<!-- End Sidebar -->
<!-- Content -->
<div class="w-full pt-4 lg:pt-5 pb-12 px-4 sm:px-6 md:px-8 lg:pl-[var(--admin-sidebar-offset)]">
<div class="admin-content-shell w-full pt-4 lg:pt-5 pb-12 px-4 sm:px-6 md:px-8 lg:pl-[var(--admin-sidebar-offset)] transition-opacity duration-200">
<x-breadcrumbs class="mb-4 hidden lg:flex" />
<main>
@yield('content')