Intento animar un componente al renderizarlo y desmontarlo en React, pero sin éxito.
Una de las formas que probé fue crear un estado ( desvanecimiento ) con la clase de propiedad de animación, al renderizar, la clase se desvanece y se desmonta, la clase se desvanece.
const handlePokemonDetails = async () => { if (pokemonDetails === true){ setFade(styles.fadeOut) await timeout(500) } else{ setFade(styles.fadeIn) } setPokemonDetails(!pokemonDetails) }...
<div className={pokemonDetails ? styles.pokemonDetails + " " + fade : ""}></div>código SASS:
.pokemonDetails position: absolute top: 0 z-index: 3 display: flex width: 35vmin height: 39.5vmin flex-direction: column background-color: rgba(210, 210, 210, 0.85) border-radius: 10px @keyframes fade 0% height: 0vmin 100% height: 39.5vmin .fadeIn animation: fade 0.5s normal .fadeOut animation: fade 0.5s reversePero, cuando cambio el estado a otra clase, el componente no aplica este nuevo estilo de animación de clase. ¿Alguien sabe cómo puedo solucionar esto u otra forma de hacerlo?
Buena pregunta. Acabo de terminar de escribir un enlace para React que ayuda con ese aspecto en https://github.com/perymimon/React-Anime-Manager
Simplemente publique ver2-alpha para que la documentación siga siendo laca.
import {useAnimeManager,ADDED,REMOVED} from "@perymimon/react-anime-manager" const phase2class = { [ADDED]: "fadeIn", [REMOVED]: "fadeOut", } function Pokemons({pokemones}){ const pokemonesStates = useAnimeManager(pokemones); return ( <pokemones> { pokemonesStates.map(state =>( <div className={phase2class[state.phase] } onAnimationEnd={state.done}/> ) )} </pokemones> ) }Este es el caso de uso exacto para react-transition-group .
Envuelva su componente dentro <CSSTransition>
function App() { const [inProp, setInProp] = useState(false); return ( <div> <CSSTransition in={inProp} timeout={200} classNames="my-node"> <div> {"I'll receive my-node-* classes"} </div> </CSSTransition> <button type="button" onClick={() => setInProp(true)}> Click to Enter </button> </div> ); } Luego agregue CSS a sus clases. Si establece className de CSSTransition en my-node , tendrá 4 clases para diseñar:
.my-node-enter { opacity: 0; } .my-node-enter-active { opacity: 1; transition: opacity 200ms; } .my-node-exit { opacity: 1; } .my-node-exit-active { opacity: 0; transition: opacity 200ms; }