Estoy tratando de crear una animación simple con TransitionGroup y CSSTransition, pero se comporta de manera inesperada a menos que elimine el nodeRef de CSSTransition.
(Por inesperadamente quiero decir que el estilo no se aplica o que las clases css exitActive y enterActive se aplican en el mismo elemento. Cuando elimino el nodeRef, funciona, pero aparece el error ' Advertencia: findDOMNode está obsoleto en StrictMode. ')
Encontré esto y explica que
Al cambiar la propiedad clave de Transition en un TransitionGroup, se debe proporcionar un nuevo nodeRef a Transition con la propiedad clave modificada
Entonces la pregunta es:
Este es el código:
const [dayIndex, setDayIndex] = useState(0); const someRef = useRef(null) ... return ( ... <TransitionGroup component={null}> <CSSTransition nodeRef={someRef} key={dayIndex} classNames={styles} timeout={1000}> <div ref={someRef} className="..."> {props.days[dayIndex]} </div> </CSSTransition> </TransitionGroup> ... )(props.days es una matriz de elementos)
Gracias
Encontré una manera de hacer que funcione. cada elemento en props.days necesita su propio componente con CSSTransition y su propio nodeRef y el contenido con la misma referencia. para seleccionar qué elemento se mostrará, use la propiedad "en".
ejemplo:
function Animation(props) { const ref = useRef(null); return ( <CSSTransition in={props.index === props.activeIndex} nodeRef={ref} key={props.index} classNames={styles} timeout={900}> <div ref={ref} className="...">{props.content}</div> </CSSTransition> ); } const [dayIndex, setDayIndex] = useState(0); ... function Main() { return ( ... <TransitionGroup component={null}> <CSSTransition nodeRef={someRef} key={dayIndex} classNames={styles} timeout={1000}> { props.days.map((content, index) => ( <Animation content={content} index={index} key={index} activeIndex={dayIndex}/> )) } </CSSTransition> </TransitionGroup> ... ) }