Transi��o n�o funciona

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 =>

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