0

目前，我正在使用一个名为 react-swing 的库（https://www.npmjs.com/package/react-swing），它基于库 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

4

2 回答 2

0

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

于 2020-09-03T16:05:01.133 回答
0

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

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

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

添加一些 zIndex 和动画更新可能会成功

react-swing 似乎以硬写的 css 同步方式进行；更改动画可能需要您分叉整个库。

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

于 2021-01-31T11:18:16.903 回答