Remove next-view-transitions and use native View Transition API
- Remove external next-view-transitions dependency - Use Next.js 16 native navigation and Safari 18+ native View Transition API - Add ViewTransitionProvider for minimal wrapping with Safari 18+ detection - Updated all Link imports from external package to next/link - Removed link-wrapper.tsx and view-transitions-wrapper.tsx This resolves Safari compatibility issues while maintaining transitions on modern browsers.
This commit is contained in:
@@ -1,9 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export default function Template({ children }: { children: React.ReactNode }) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [prefersReducedMotion, setPrefersReducedMotion] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -14,26 +13,6 @@ export default function Template({ children }: { children: React.ReactNode }) {
|
||||
return () => mq.removeEventListener('change', handler);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
if (prefersReducedMotion) {
|
||||
container.style.animation = 'none';
|
||||
container.style.opacity = '1';
|
||||
container.style.transform = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
// Trigger animation on mount
|
||||
container.style.animation = 'none';
|
||||
void container.offsetHeight;
|
||||
container.style.animation = 'pageEnter 0.45s cubic-bezier(0.32, 0.72, 0, 1) forwards';
|
||||
}, [children, prefersReducedMotion]);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="page-transition">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
// ViewTransitions handles page transitions - no additional wrapper needed
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user