Tengo un booleano para controlar dos componentes (fullPage/halfPage) en un div . cuando el valor booleano es true componente de página completa aplicado y componente false de media página aplicado. ¿Cómo puedo aplicar el efecto fadeIn, fadeOut en ese div ? por lo tanto, cuando fullPage el nombre de clase de página completa, la página completa se desvanece y la mitad de la página se desvanece. cuando se halfPage el nombre de clase de media página, la página completa se desvanece y la mitad de la página se desvanece?codigosandox.io
// css .App { font-family: sans-serif; text-align: center; } .fullPage { background-color: aquamarine; animation: fadeIn 2s linear; width: 490px; } .halfPage { background-color: bisque; animation: fadeIn 2s linear; width: 290px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } // App.tsx import "./styles.css"; import { useState } from "react"; import classNames from "classnames"; export const HalfPage = () => { return ( ... )} export const FullPage = () => { return ( ... ); }; export default function App() { const [cnt, setCnt] = useState(0); const isFullPage = cnt % 2 === 0; const appClass = classNames({ fullPage: isFullPage, halfPage: !isFullPage }); const handleOnClick = () => { setCnt(cnt + 1); }; return ( <div className="App"> <button onClick={handleOnClick}>Change background</button> <div className={appClass}>{isFullPage ? <FullPage /> : <HalfPage />}</div> </div> ); }Puede lograr el efecto de aparición/desaparición gradual en ambos elementos, pero requiere una refactorización en su código HTML, así como algo más de CSS para que funcione. Todo lo que hacemos es envolver estos elementos de página en divs y colocarlos en un elemento principal cuyo nombre de clase es inner-container para mantenerlos en la misma posición en la que deberían estar.
Entonces, su nuevo styles.css se vería así (he señalado los cambios):
.App { font-family: sans-serif; text-align: center; } /* Added opacity, position and transition time in both elements. */ .fullPage { background-color: aquamarine; animation: fadeIn 2s linear; width: 490px; opacity: 0; transition: 0.4s; position: absolute; } .halfPage { background-color: bisque; animation: fadeIn 2s linear; width: 290px; opacity: 0; transition: 0.4s; position: absolute; } /* Added flag class for active element and class for inner container. */ .active { opacity: 1; } .inner-container { position: relative; } /* Keyframes are not necessary. */ /* @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } */ Su función de return en App.tsx se vería así:
return ( <div className="App"> <button onClick={handleOnClick}>Change background</button> <div className="inner-container"> <div className={isFullPage ? "fullPage active" : "fullPage"}> <FullPage /> </div> <div className={isFullPage ? "halfPage" : "halfPage active"}> <HalfPage /> </div> </div> </div> );