React router dom transition animation

Nesse post mostramos como criar rotas com React. Apartir desse projeto, vamos ver como criar efeitos de animação na navegação entre componentes. 

Primieramente vamos instalar a dependência navegando até a raiz do proejto pelo prompt executando esse comando:

npm install --save react-addons-css-transition-group

Agora vamos criar um arquivo style.css dentro de www com esse conteúdo:

.example-enter {
  opacity: 0.01;
}
.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.example-leave {
  opacity: 1;
}
.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}
.SlideIn-appear {
  transform: translateX(30px);
  opacity: 0;
}
.SlideIn-appear.SlideIn-appear-active {
  opacity: 1;
  transform: translateX(0);;
  transition: all 0.6s linear;
}
.SlideIn-enter {
    opacity: 0;
    transform: translateX(30px);
}
.SlideIn-enter.SlideIn-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.2s linear 0.4s;
}
.SlideIn-leave {
    opacity: 1.0;
    transform: translateX(0);
}
.SlideIn-leave.SlideIn-leave-active {
    opacity: 0;
    position: absolute;
    width: 100%;
    transform: translateX(-30px);
    transition: all 0.2s linear;
}

Não devemos esquecer de referenciar o css no index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Production</title>
  </head>
  <body>
  <div id="meu-app"></div>
  <link rel="stylesheet" type="text/css"  href="style.css" />
  <script type="text/javascript" src="./bundle.js"></script></body>
</html>

Nesse arquivo criamos dois efeitos de transição: example e SlideIn. Na documentação oficial diz que esse componente foi inspirado no ng animate do Angular.

Agora o arquivo index.js deve ficar assim:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link,Switch } from 'react-router-dom';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
class Produtos extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
                    mostraPagina: false
                };
  }
    
  componentDidMount() {
    this.setState({...this.state,mostraPagina:true});
  }    
  render() {
    const pagina = (this.state.mostraPagina ? 
    (
    <h1>Produtos!! Aparece depois que o componente é montado!!</h1>
    ) : null);
    
    return (
      <div>
       <ReactCSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
          {pagina}
        </ReactCSSTransitionGroup>
        <ReactCSSTransitionGroup
          transitionName="SlideIn"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
          {pagina}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}
const Home = () => (
          <h1>Home!!</h1>
)
 
class App extends React.Component{
                 
 render(){
     return (
      <div>
          <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/produtos' component={Produtos}/>
         </Switch>
         <h1>Conteúdo fixo</h1>
         <nav>
          <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/produtos'>Produtos</Link></li>
          </ul>
         </nav>
         
      </div>       
     );
 }
};
ReactDOM.render(
<BrowserRouter>
    <App />
</BrowserRouter>
,document.getElementById("meu-app"));

 Deixamos tudo em um único arquivo para facilitar o entendimento. Note que para que o efeito de transição funcione, devemos segurar a renderezação da página e liberá-la só depois que o componente for montado com método componentDidMount. 

Na renderização no componente Produtos, renderizamos a página duas vezes para mostrar os dois efeitos definidos no css: example SlideIn

Agora basta iniciar o projeto e ver o resultado:

Imagem

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente