feat: add page transition animations and loading indicators

- Add nextjs-toploader for instant top progress bar on navigation
- Add next-view-transitions for View Transitions API page transitions
- Enhance template.tsx page enter animation (0.45s, scale effect)
- Replace next/link with next-view-transitions Link for smooth transitions
- Add prefers-reduced-motion support for accessibility

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-02-13 23:07:51 +08:00
parent a4e88fa506
commit 7d85446ac5
16 changed files with 110 additions and 43 deletions

View File

@@ -122,11 +122,11 @@ body {
@keyframes pageEnter {
from {
opacity: 0;
transform: translateY(20px);
transform: translateY(16px) scale(0.99);
}
to {
opacity: 1;
transform: translateY(0);
transform: translateY(0) scale(1);
}
}
@@ -134,6 +134,13 @@ body {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.page-transition {
opacity: 1;
transform: none;
}
}
/* Scroll reveal animations - CSS only */
.scroll-reveal {
opacity: 0;