Fórum Transição não funciona #620936

16/01/2024

Olá , estou criando um Portfólio , utilizando React ,frame-motion e react-router-dom , criei uma animação de Transição entre páginas para que toda vez que eu mude de rota a animação seja chamada .

O problema é que ao mudar de rota, o novo componente correspondente a rota é chamado imediatamente, antes mesmo de minha animação terminar.

Gostaria que os novos componente só renderizassem depois que minha animação for executada.

Estou a muitos dias tentando resolver e nada ... Alguém poderia me ajudar ?

Página APP =>

Ler Mais...

import { Cabecalho } from "./componentes/Cabecalho";
 
import GlobalStyled from "./componentes/GlobalStyled";
 
import { ConteudoDaPagina } from "./componentes/Páginas/Paginação";
 
function App() {
  return (
    <>
      <GlobalStyled />
      <Cabecalho />
      <ConteudoDaPagina />
    </>
  );
}
 
export default App;

Página referente as rotas =>

import { Route, Routes, BrowserRouter as Router } from "react-router-dom";
 
import { AboutMe } from "../About Me";
 
import { Intro } from "../Home";
 
import { Projects } from "../Projects";
 
import { TalkToMe } from "../Talk To Me";
 
import Transicao from "../Animações/Transição/Transition";  **//Animação de Transição entre paginas** 
 
import { Menu } from "../../Menú";
 
export function ConteudoDaPagina() {
  return (
    <Router>
      <Menu />
      <Routes>
        <Route path="/" element={<Intro />} />
        <Route path="/About_Me" element={<AboutMe />} />
        <Route path="/Projects" element={<Projects />} />
        <Route path="/Talk_To_Me" element={<TalkToMe />} />
        <Route path="*" element={<div>''''''''''''''''''''''''''''''''Página não encontrada''''''''''''''''''''''''''''''''</div>} />
      </Routes>
    </Router>
  );
}

Theo Lefevre

Curtir tópico

+ 0

Responder