React's new <ViewTransition /> doesn't seem to work
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 45/100
- Tipo de issue
- Error
- Claridad
- Necesita aclaración
- Estado de actividad
- Activo
- Stack tecnológico
- react, typescript
- Área
- frontend
Línea de trabajo
Comienza con el ejemplo de TypeScript aroundNav proporcionado y la integración de Router; después, reproduce la navegación con y sin flushSync utilizando la documentación de ViewTransition de React. Inspecciona la entrada de view-transition y el panel de animaciones de Chrome; el trabajo estará terminado cuando se identifique por qué no aparece ninguna transición y se documente una corrección verificada o el uso requerido.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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?
- Lenguaje dominante
- TypeScript
- Estrellas
- 7.9k
- Forks
- 193
- Merge medio
- 6 min
- PR fusionados (30 d)
- 3
Preparar el entorno
Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de molefrog/wouter
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
-
Dificultad 3/5 1-2 días Aptitud para principiantes 52/100
-
Dificultad 4/5 3-5 días Aptitud para principiantes 45/100
-
Links using ~ do not respect `base`Posiblemente ocupada @molefrog la tomó hace 24 días. Abierto
Dificultad 3/5 1-2 días Aptitud para principiantes 45/100
-
bug
Dificultad 3/5 1-2 días Aptitud para principiantes 55/100
Todos los issues de molefrog/wouter
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 82/100
better-auth/better-auth#12132 · 1 reacción ·
Los mantenedores suelen responder en 1 día
-
o8 next debug build aborts on Glass to Dark appearance switch (nil identifier messaged before check)Abiertobug
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
hurttlocker/o8#5112 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
webrecorder/wabac.js#386 ·
-
needs-triage
Dificultad 1/5 1-3 horas Aptitud para principiantes 92/100
agent-of-empires/agent-of-empires#5098 · 1 comentario · 1 reacción ·
Los mantenedores suelen responder en 1 día