React - 🎉 React 五彩纸屑成功动画！告别无聊 Toast，让你的 App 嗨起来！✨

UP主: 技术小白 · 时长: 6:44 · 🔗 B站原视频

发布: 2025-02-15 · 收录: 2025-02-17

标签: React · 前端开发 · 动画效果 · TailwindCSS · JavaScript

开场与效果展示

伙计们，欢迎回到我们的频道。在这个视频中，我们将构建一个非常酷的东西。

当你使用表单提交或上传数据时，通常会收到一个通知弹窗或警报。如果成功完成了，我们不想用传统方式显示成功，而是做点更有趣的事情。

我这里有一个按钮，上面写着“提交”。我会点击很多次，如果成功了，你会看到这些酷炫的烟花动画。再来一次：点击提交，等待，成功后会显示这个动画。真的很有趣，也很简单。我们会用最简单的方式来构建它，没有额外延迟。开始吧，源代码在描述中。

项目环境与依赖安装

我在 VS Code 里打开 React 项目，也安装了 React Tailwind，设置已经就绪。

在 App.js 文件中，首先我从 canvas-confetti 导入 confetti，这是我们用来添加烟花动画的包。

要添加它，你去 npm 搜 canvas-confetti，用 npm 命令安装它。如果你在使用 HTML 文件，也可以用 CDN。

状态设计：模拟异步提交流程

我们要模拟一个假的提交过程，就像向后端发送请求并等待响应，所以会有一点延迟。

我们会有两个状态：loading 状态，以及 submit 状态（最终成功状态）。这两个用 useState 钩子，初始都设为 false。

点击按钮时触发一个“假请求”的过程，所以我们会有一个 handleClick 函数。它是同步函数：

• 如果 loading 为 true，或者 submit 为 true，就直接 return。
• 否则把 loading 设为 true。
• 创建一个新的 Promise，用 setTimeout 在 1.5 秒后 resolve。
• 等完成后，把 loading 设为 false，把 submit 设为 true。

保存后刷新，你暂时不会看到任何东西，因为还没有写页面内容。

构建按钮与加载动画

现在开始构建按钮。按钮绑定 onClick，并且在 loading 为 true 时禁用按钮，避免用户在加载时重复点击。

按钮样式用 Tailwind：背景黑色、圆角、小号白字、宽高、flex，并用 justify-center 和 items-center 让内容居中。

按钮内部放一个 span，也是 flex items-center，并加 gap-1。

当 loading 为 true 时，我们显示三个点的动画：每个点是一个小圆（高度宽度、背景、圆角），加 animate-bounce，并且其中一个点加一个负的延迟（比如 -0.3s），这样三个点会错开跳动。

当 loading 为 false 且 submit 为 false 时显示“提交”；当 loading 为 false 且 submit 为 true 时显示“成功”。

保存后看看效果：点击按钮会显示三个点，完成后显示“成功”。

添加五彩纸屑（烟花）动画

现在我们还没加烟花动画。要加的话，在提交成功那里触发 confetti，并传一个对象：

• particleCount: 粒子数量，比如 150
• spread: 烟花展开范围，比如 60

保存并刷新页面，点击按钮：先加载，然后成功时会出现烟花动画。看起来不错。

总结与结尾

我希望这个视频有帮助。不一定每次成功消息都要用通知、Toast、警报，你也可以用一些更酷的方式来展示。

视频到此为止，希望你们学到了新的有趣知识。代码在描述中，记得去看看。如果你是新来的、还没有订阅，记得订阅并打开通知铃，这样我上传新视频时你就能收到通知。

下次视频见，拜拜，再见，保重。