在 Material Design 中，Snackbar 是一种常用的用户提示工具，它可以在屏幕底部或顶部弹出，提醒用户操作完成或发生错误。Snackbar 不仅界面美观，而且交互友好。一般情况下，Snackbar 出现时会有动画效果，本文将介绍 Snackbar 的动画效果及实现方式。
Snackbar 的动画效果
Snackbar 的动画分为两个阶段：进入阶段和离开阶段。进入阶段包括从下方（或上方）移动到指定位置和渐变显示 Snackbar 的内容两个动画，离开阶段包括从指定位置移动到下方（或上方）和渐变隐藏 Snackbar 的内容两个动画，如图所示：
其中，进入阶段的动画包括 translateY() 和 alpha()，代码如下：
-- ------ -- --------------- - ---------- ----------------- -- ----- -- -------- -- -- ------- -- - ---------------------- - ---------- -------------- -- ------- -- -------- -- -- ---- -- ----------- --- ---- --------- -- ------ -- -
离开阶段的动画同样包括 translateY() 和 alpha()，代码如下：
-- ---- -- --------------- - ---------- -------------- -- ------- -- -------- -- -- ------ -- - ---------------------- - ---------- ----------------- -- ----- -- -------- -- -- ---- -- ----------- --- ---- --------- -- ------ -- -
Snackbar 的实现方式
根据官方文档，Snackbar 的实现方式分为两种：使用 Snackbar 组件和手动创建 Snackbar，下面将分别介绍。
使用 Snackbar 组件
Snackbar 组件是 Material-UI 框架中的一部分，使用起来非常简单。首先，需要引入 Snackbar 组件：
------ -------- ---- -----------------------------
然后，使用 <Snackbar> 标签定义 Snackbar，传递 open、onClose、message 等参数，具体如下：
----- ------ -------- - ----------------
----- ------------------- - ------- ------- -- -
-- ------- --- ------------ -------
---------------
--
------ -
---------
-----------
-----------------------
-----------------------------
------------- -- - -------- --------
--
--在上述代码中，useState 定义了 open 状态，表示 Snackbar 是否打开，handleSnackbarClose 方法用于关闭 Snackbar。当点击 Snackbar 外部或过了自动隐藏时间后，会调用 onClose 方法回调。autoHideDuration 参数定义了 Snackbar 自动隐藏等待时间，单位为毫秒。
手动创建 Snackbar
相比较于使用 Snackbar 组件，手动创建 Snackbar 相对较为麻烦，但对于一些特殊场景（如需要自定义 Snackbar 样式等）非常有用。
首先，需要手动创建 Snackbar 的 HTML 标签，代码如下：
---- -------------- ---- -- - -------- ------- ------
需要注意的是，这里的 id 必须为 snackbar。接下来，在 JavaScript 中监听某些事件（如按钮点击事件），然后动态修改 Snackbar 的 transform 和 opacity 属性，具体代码如下：
----- ----------- - -- -- -
----- -------- - ------------------------------------
------------------------ - ----------------
---------------------- - --
------------- -- -
------------------------ - -------------------
---------------------- - --
-- ------
--上述代码中，showMessage 方法用于显示 Snackbar，首先获取 Snackbar 元素，然后将 transform 和 opacity 属性设置为进入阶段的最终值，等待 3000 毫秒后再将它们设置为离开阶段的最终值。
总结
本文介绍了 Material Design 中 Snackbar 的动画效果和实现方式，其中，Snackbar 的动画分为进入阶段和离开阶段，包括 translateY() 和 alpha() 动画。Snackbar 的实现方式有两种，使用 Snackbar 组件和手动创建 Snackbar，读者可以根据自己的需求选择适合自己的实现方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65a467c2add4f0e0ffcad0db