如何在 NextJS 中制作小部件答案

【问题标题】：How to make widgets in NextJS如何在 NextJS 中制作小部件
【发布时间】：2021-04-17 09:26:14
【问题描述】：

我最近看到了 Stripe 网站，其中有一个带有卡片图像的部分，它会自动填充详细信息，然后滚动到下一个选项卡并再次显示。参考本站部分https://stripe.com/en-in/payments

请参阅上面链接到条带站点的这一部分：

我认为这些是小部件。我是动画新手。谁能建议如何使用 Next.js/React.js 制作这些并嵌入我们的网页？

【问题讨论】：

【解决方案1】：

通过搜索，我发现有很多我们可以使用的打字效果包。我会列出他们 1)https://www.npmjs.com/package/react-typing-animation

我们可以使用这些包来创建打字效果。注意 - 如果您必须在多个地方显示此动画，则可以使用您的 javascript 方法同步它们。

另一种简单的使用方法可以通过简单地为该动画插入一个 GIF 来完成，如果你不想乱码?

如果有其他方法，请随时分享。

【讨论】：

【解决方案2】：

有趣的是，我会模拟自动文本 (https://youtu.be/t7ePHIsKnnI)，然后使用 setTimeOut 或 UseEffect 更改组件

【讨论】：

这将消除问题或无限自动输入，但是自动单击并悬停并自动显示列表看起来像视频而不是视频@andresCampuzanoGarzon
你抓住我，我建议做一个礼物（不是视频），它不会让开发变得更加困难。问候
我发现了一些类似 react-typing-animations 的库，但在实现时遇到了问题。我给连续部分一个开始延迟，但完成如何重置它们。他们将再次采取时间延迟，它会顺利进行 2-3 次迭代，但接下来的 3-4 动画是粗糙的，然后是平滑的并继续。任何改进它的想法@andres