如何在React.js描述中为SandBox中制作功能性火种式卡片？

问题描述

当前，我正在基于库Swing（https://www.npmjs.com/package/react-swing）使用一个名为react-swing（https://github.com/gajus/swing）的库。这两个库都允许您创建可滑动的火种卡。目前，我可以滑动组件并通过控制台记录滑动的方向，但是我很难理解如何在滑动时实现功能。理想情况下，我希望将刷过的卡放到“包装”的背面，以便您可以再次遍历它们，但是我在此功能方面遇到任何建议吗？

代码：

function Webapps() {
import React,{ useRef,useState,useEffect } from 'react';
import Data from '../Data/webApps_data';
import ReactSwing from '../../node_modules/react-swing/dist/react-swing.js';

    const projectStack = useRef();


    return (
        <div className='webAppStyles'>
            <ReactSwing className="stack" ref={projectStack} throwout={(e) => console.log('throwout',e)}>
                {Data.map((Projects,index) => {
                    return <div>{Projects.workName}</div>
                })}
            </ReactSwing>
        </div >
    )
}

沙箱（根据要求，我设置了一个沙箱，希望有人可以帮助我！）： https://codesandbox.io/s/sleepy-sunset-jqjst?file=/src/App.js

解决方法

我找到了一种使用translate(0,0) rotate(0)更新可滑动元素的方法，但是我不知道如何在检测到滑动后触发此操作 更新：无法使用此功能，因为当您尝试再次滑动该元素时，它会消失并损坏

,

我不知道 react-swing，但这可以通过 react-voodoo 来完成。

这是一个带有代码和框的卡片刷卡实现示例：

https://react-voodoo.github.io/react-voodoo-samples/

添加一些 zIndex 和动画更新可能会奏效

react-swing 似乎以一种硬编写的 css 同步方式来实现；改变动画可能需要你 fork 整个库。

这也可以用 react-spring 从头开始​​