Esta es una idea aproximada, pero podría funcionar.

Sugeriría crear un CardComponent y hacer que se apilen entre sí, con el último en la parte inferior.

 return ( <div className="card-container"> { this.state.cards.map((card, index)=>{ return (<CardComponent key={card.id} details={card}></CardComponent>) }) } </div> )

Algo como eso.

Luego, en la parte CSS, configure .card-container para que sea un contenedor y luego use el orden de los elementos de CardComponent que devolvería <div>stuff here</div> .

Luego configure .CardComponent > div para posicionar las cosas en absoluto y luego aproveche la propiedad z-index .

Usa este código cuando quieras quitar la primera carta y agregar una nueva carta al final (en la parte inferior de la pila de cartas).

 var count = 0; // Reverse the array, so you can order from bottom to front $('.card-container > div').reverse().each( function() { $(this).css('z-index', ++count); } );

Luego puede actualizar el estado de las tarjetas.

 let newCardList = this.state.slice(1); let newCard = null; // Add the new card here newCardList.append(newCard); this.setState({ ...this.state, cards: newCardList })

Entonces, en el evento de deslizamiento en dicho CardComponent, solo obtenga la clave del evento, reproduzca una animación de diapositiva usando jQuery, y después de que finalice la animación, simplemente corte la matriz de tarjetas como en el código anterior.

También deberá llamar a esto, después de cortar, y agregar una nueva tarjeta.

$('.card-container > div').reverse().each(

Supongo que trabaja en una aplicación de navegador web principalmente para usuarios de computadoras.

• para animaciones, puedes descomponer el movimiento en un par de fotogramas,
• para el deslizamiento, puede ir con funciones de eventos personalizadas si no puede encontrar nada existente,
• la pila de cartas es un manejo de estado simple y recomiendo usar ganchos.