Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[FEATURE REQUEST] Shared element transitions support

Abierto
#119 3 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
frontend, web-dev

Línea de trabajo

No se nombra ningún archivo del repositorio, prueba ni punto de entrada. Empieza leyendo la guía de desarrollo vinculada de shared-element-transitions y comprobando el modelo actual de transición del router; se consideraría terminado cuando exista un enfoque definido y compatible con los navegadores para implementar shared element transitions en SPAs de Solid.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement

This is likely out of the scope for the time being, especially since the feature is still locked behind the chrome://flags/#document-transition flag in chrome canary.

Some resources on the incoming API in question:

The transitions function by rendering the soon to be page as a separate DOM structure (kinda similar to solid's Portal) then taking a screenshot of both the previous element and the new element. These screenshots get animated in some form before the new page's contents become interactable again.

It would be really cool to see this feature power solid SPAs as soon as browsers begin to support it.

High level, this could look like:


const App = () => {

    return (
        <div style={{width: "100vw", height: "100vh"}}>

            <NavBar />
            
            <Routes>
                <Route path="/" element={<Dashboard/>} />
                <Route path="/content/:id" element={<Content/>} transition={true}  />
            </Routes>

        </div>
    );
};

it's assumed the user has configured any required css to customize the transition.

Lenguaje dominante
TypeScript
Estrellas
1.3k
Forks
180
Merge medio
1 d 6 h
PR fusionados (30 d)
20

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de solidjs/solid-router

Todos los issues de solidjs/solid-router

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.