Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

React's new <ViewTransition /> doesn't seem to work

Aperta
  • Qualcosa non va?
#559 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia con l’esempio TypeScript aroundNav fornito e l’integrazione di Router, quindi riproduci la navigazione con e senza flushSync usando la documentazione di ViewTransition di React. Ispeziona l’elemento view-transition e il pannello delle animazioni di Chrome; il lavoro è completato quando hai identificato perché non appare alcuna transizione e hai documentato una correzione verificata o l’utilizzo richiesto.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

I've been trying to get React's upcoming component to work, which is a wrapper over the browser view-transitions API with some niceties. However, I was not able to get this to work. I've replicated the example in the docs for the view-transitions API, and created an aroundNav, except instead of invoking it with document.startViewTransition, I use react's startTransition as they've described in their docs. I tried this both with and without the flushSync. In none of these scenarios could I get it work. Has anyone tried this yet? Any idea how I can get it to work?


const aroundNav: AroundNavHandler = (navigate, to, options) => {
	startTransition(() => {
		flushSync(() => {
			navigate(to, options);
		});
	});
};

const App = () => {
	return (
		<StrictMode>
			<Router aroundNav={aroundNav}>
				// ...

I am seeing something to do with viewtransitions flash near the <html> node in Chrome's web inspector's elements panel, but it goes away too soon know what it says, but I suspect it's something React is doing. However in the animations panel in Chrome, I don't see any animation running, but I expect to see the standard fade animations provided by the default view-transitions API.

Any idea what I might be doing wrong?

Lingua principale
TypeScript
Stelle
7.9k
Fork
193
Merge medio
9m
PR unite (30g)
1

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di molefrog/wouter

Tutte le issue di molefrog/wouter

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.