NextJS App Router Просмотр переходов: исходящая страница дубликат на навигации вперед - почему и как исправить? ⇐ CSS

[Anonymous]

У меня есть следующий простой переход страницы (см. Видео), где исходящая страница (стр. 1) должна слегка двигаться влево, пока входящая страница (стр. 2) скользит справа. Возвращение со страницы 2 на страницу 1 имеет такой же, но обратный переход. Обратный переход работает, как и ожидалось. Однако, когда перейдем от стр. 1 на страницу 2, страница 1 изначально начинает скользить с того, что он кратко скользит как дублированный наложение страницы 1 на сама себя одновременно как фактический переход, а затем исчезает (см. GIF).
Что могло это вызвать и как я могу решить это? />globals.css

Код: Выделить всё

@import "tailwindcss";

@theme {
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}

@keyframes slide-in-backward {
from {
transform: translateX(100vw);
}
to {
transform: translateX(0);
}
}

@keyframes slide-out-backward {
from {
transform: translateX(0);
}
to {
transform: translateX(-20vw);
}
}

/* Reverse animations for back navigation */
[data-transition="backward"]::view-transition-new(root) {
animation-name: slide-in-backward;
animation-duration: 6000ms;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-fill-mode: forwards;
}

[data-transition="backward"]::view-transition-old(root) {
animation-name: slide-out-backward;
animation-duration: 6000ms;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
animation-fill-mode: forwards;
}

@keyframes slide-out-forward {
from {
transform: translateX(0);
}
to {
transform: translateX(100vw);
}
}

@keyframes slide-in-forward {
from {
transform: translateX(-20vw);
}
to {
transform: translateX(0);
}
}

/* Reverse animations for back navigation */
[data-transition="forward"]::view-transition-new(root) {
animation-name: slide-in-forward;
animation-duration: 6000ms;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 1000;
animation-fill-mode: forwards;
}

[data-transition="forward"]::view-transition-old(root) {
animation-name: slide-out-forward;
animation-duration: 6000ms;
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 9999;
animation-fill-mode: forwards;
}
< /code>
page.tsx
const page = () => {
return (

Home

[url=/page1]
Go to page 1
[/url]
[url=/page2]
Go to page 2
[/url]


)
}

export default page

page1/page.tsx

Код: Выделить всё

'use client'
import React from 'react'
import Link from 'next/link';
import { useRouter } from "next/navigation";

const page = () => {
const router = useRouter();

function sleep(ms: number): Promise {
return new Promise((resolve) => setTimeout(resolve, ms));
}

const handleNavigation = async (e: React.MouseEvent, direction: 'forward' | 'backward', url: string) => {
// Set the transition type on the root element
e.preventDefault()
document.documentElement.setAttribute('data-transition', direction)

// If the browser supports the View Transitions API, use it.
// Otherwise, just navigate.
if (document.startViewTransition) {
document.startViewTransition(async() =>  {
router.push(url, { scroll: false })
})
} else {
router.push(url, { scroll: false })
}
}

return (


Page 1
[url=/page2] handleNavigation(e, 'backward', "/page2")}
>
Go to page 2
[/url]

)
}

export default page

page2/page.tsx
'use client'
import React, { useEffect } from 'react'
import Link from 'next/link';
import { useRouter } from "next/navigation";

const page = () => {

const router = useRouter();

const handleNavigation = (e: React.MouseEvent, direction: 'forward' | 'backward', url: string) => {
// Set the transition type on the root element
e.preventDefault()
document.documentElement.setAttribute('data-transition', direction)

// If the browser supports the View Transitions API, use it.
// Otherwise, just navigate.
if (document.startViewTransition) {
document.startViewTransition(() => {
router.back()
})
} else {
router.back()
}
}

useEffect(() => {
console.log(document.referrer)
}, [])

return (


Page 2
handleNavigation(e, 'forward', '/page1')}
>
Go to page 1


)
}

export default page
< /code>
Зависимости и версии < /p>

Следующая 15.2.0 < /li>
React 19.0.0 < /li>
React-dom 19.0.0 < /li>
< /ul>

Подробнее здесь: https://stackoverflow.com/questions/794 ... -navigatio