Uso React y tranct-transition-group para escribir componentes de carrusel
Pero me encontré con el problema de que la animación no surte efecto. El código es el siguiente
Enlace https://stackblitz.com/edit/react-ts-mi8mwj?file=Carousel.tsx
Carrusel.tsx
import React, { FC, Fragment, ReactNode, useMemo, useState } from 'react'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; import CarouselItem, { ItemProps } from './CarouselItem'; import './Carousel.scss'; export interface Props {} const Component: FC<Props> = (props) => { const { children } = props; const [curIndex, setCurIndex] = useState(1); const length = useMemo(() => { return Array.from(children as ReactNode[]).length; }, [children]); const onNext = () => { setCurIndex((curIndex + 1 + length) % length); }; const onPrev = () => { setCurIndex((curIndex - 1 + length) % length); }; return ( <Fragment> <button onClick={onPrev}>prev</button> <button onClick={onNext}>next</button> <div className="g-carousel-wrapper"> <div className="g-carousel-window"> <TransitionGroup className="item"> {React.Children.map(children, (child, index) => { const childElement = child as FC<ItemProps>; if(child.type !== CarouselItem) throw new Error('必须是Item') return ( <CSSTransition classNames="item" timeout={300} key={index}> {React.cloneElement(childElement, { index, style: { display: curIndex !== index && 'none' }, })} </CSSTransition> ); })} </TransitionGroup> </div> </div> </Fragment> ); }; type CarouselType = { Item: FC<ItemProps>; } & FC<Props>; const Carousel: CarouselType = Component as CarouselType; Carousel.Item = CarouselItem; export default Carousel;CarruselItem.tsx
import React, { CSSProperties, FC } from 'react'; export interface ItemProps { index?: number; style?: CSSProperties; } const carouselItem: FC<ItemProps> = (props) => { const { children, style } = props; return ( <div className="g-carousel-item" style={style}> {children} </div> ); }; export default carouselItem;No entiendo por qué no solo no hay efecto de animación sino que tampoco existe el className de CSSTransition, parece que react-transition-group no tiene efecto gracias
Creo que no necesitamos usar el componente TransitionGroup . CSSTransition in sí admite una propiedad interna, podemos usar esta propiedad para controlar su visibilidad.
Entonces, primero, agregue la condición in CSSTransition :
<CSSTransition in={curIndex === index} classNames="item" timeout={300} key={index} > Y luego, simplemente elimine el TransitionGroup :
<div className="g-carousel-wrapper"> <div className="g-carousel-window"> {React.Children.map(children, (child, index) => { const childElement = child as FC<ItemProps>; if (child.type !== CarouselItem) throw new Error('必须是Item'); return ( <CSSTransition in={curIndex === index} classNames="item" timeout={300} key={index} > {React.cloneElement(childElement, { index, style: { display: curIndex !== index && 'none' }, })} </CSSTransition> ); })} </div> </div>Debería estar funcionando ahora: https://stackblitz.com/edit/react-ts-kqed2n?file=Carousel.tsx