En este artículo, veamos cómo podemos agregar animaciones a la tarjeta usando React Transition Group.
Enfoque: para animar la transición de la tarjeta, usaremos el componente SwitchTransition del React Transition Group. El componente SwitchTransition tiene dos modos: entrada-salida y salida-entrada. La siguiente carta aparecerá primero antes de que la carta anterior desaparezca y reemplace su posición. La tarjeta desaparecerá primero y luego la posición será reemplazada por la siguiente tarjeta.
A continuación se muestra la implementación paso a paso del enfoque anterior.
requisitos previos:
Creación de la aplicación React e instalación del módulo:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app demo
Paso 2: después de crear la carpeta de su proyecto, es decir, la demostración, muévase a ella con el siguiente comando.
cd demo
Paso 3: instale el grupo de transición de React desde npm.
npm i react-transition-group
Abra la carpeta src y elimine los siguientes archivos:
- logotipo.svg
- setupTests.js
- Aplicación.prueba.js
- índice.css
- informeWebVitals.js
Estructura del proyecto: el árbol de estructura de su proyecto debería verse así:
index.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );
- Nombre de archivo: App.js
Javascript
import React, { useState } from "react"; import { CSSTransition, SwitchTransition } from "react-transition-group"; import "./App.css"; export default function App() { const [state, setState] = useState(false); const [mode,setMode] =useState("in-out") return ( <div className="App"> <div> <button className="btn-mode" onClick={()=>setMode(mode==="in-out"? "out-in" : "in-out")}>Change Mode</button> <p className="p-mode">Current Mode: {mode}</p> </div> <SwitchTransition mode={mode}> <CSSTransition key={state ? "Goodbye, world!" : "Hello, world!"} addEndListener={(node, done) => node.addEventListener("transitionend", done, false) } classNames="fade" > <div className="a"> <p>{state ? "A computer Science Portal" : "GeeksforGeeks also known as GFG"}</p> <button onClick={() => setState((state) => !state)}> {state ? "Go back" : "Know more"} </button> </div> </CSSTransition> </SwitchTransition> </div> ); }
App.css
/* Write CSS Here */ .fade-enter { opacity: 0; } .fade-exit { opacity: 1; } .fade-enter-active { opacity: 1; } .fade-exit-active { opacity: 0; } .fade-enter-active, .fade-exit-active { transition: opacity 300ms; } .a { width: 300px; height: 200px; border: 4px solid green; border-radius: 10px; box-shadow: 2px 2px 2px 2px rgb(93, 94, 93, 0.4); text-align: center; margin: 20px; background: rgb(156, 232, 156); } p { font-size: 30px; color: green; } button { width: 100px; height: 30px; border-radius: 4px; padding: 4px; color: rgb(38, 47, 96); font-weight: bold; background: rgb(195, 246, 197); } .btn-mode { width: 300px; margin: 20px; background: rgb(207, 215, 207); } button:hover { border: 4px solid green; } .p-mode { margin: 20px; color: rgb(43, 111, 52); }
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida:
Publicación traducida automáticamente
Artículo escrito por tejaswaniagrawal23 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA