Etiqueta de desvanecimiento que es una etiqueta de animación en el paquete reaccionar-revelar. Quiero usar la etiqueta de Fade para la animación solo cuando mi mouse esté bajo la etiqueta div. De lo contrario, no quiero animar el div className=card-container pero para hacer esto tengo que repita el código div className=card-container así { isHover ? <Fade>div className="card-container"</Fade> : div className="card-container" }
¿Hay alguna alternativa para eliminar la etiqueta Fade solo de manera simple?
import React from "react"; import styled from "styled-components"; import { Fade } from "react-reveal"; export default function CardSection() { const [isHover, setIsHover] = React.useState(false); function getIsHover() { setIsHover((prev) => !prev); } return( <CardSectionStyled> <div onMouseEnter={getIsHover}> <div className="card-container"> {/* Here I have to repeat p tag in order to add and remove Fade tag */} {isHover ? <Fade right duration={1500} delay={500}> <div className="card-left"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab </p> </div> </Fade> : <div className="card-left"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab </p> </div> } </div> </CardSectionStyled> ); } const CardSectionStyled = styled.section` .card-container { display: grid; grid-template-columns: repeat(2, 1fr); } p { padding: 1.5rem 0; } `;Los elementos de reacción son valores (específicamente, son objetos), puede ponerlos en variables. Entonces puede poner ese div en una variable (digamos, cardLeft ) y luego usarlo en los dos lugares que lo necesita:
export default function CardSection() { const [isHover, setIsHover] = React.useState(false); function getIsHover() { setIsHover((prev) => !prev); } // *** Put the React element for the `div` in a variable const cardLeft = ( <div className="card-left"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab </p> </div> ); // *** Use `cardLeft` in the two places you need it below return( <CardSectionStyled> <div onMouseEnter={getIsHover}> <div className="card-container"> {isHover ? <Fade right duration={1500} delay={500}> {cardLeft} </Fade> : cardLeft } </div> </div> </CardSectionStyled> ); } (También agregué un </div> faltante).
Hay una docena de formas diferentes de girarlo. Por ejemplo:
export default function CardSection() { const [isHover, setIsHover] = React.useState(false); function getIsHover() { setIsHover((prev) => !prev); } let cardLeft = ( <div className="card-left"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab </p> </div> ); if (isHover) { cardLeft = ( <Fade right duration={1500} delay={500}> {cardLeft} </Fade> ); } return( <CardSectionStyled> <div onMouseEnter={getIsHover}> <div className="card-container">{cardLeft}</div> </div> </CardSectionStyled> ); }