Material Design 中 Snackbar 的动画及实现方式

在 Material Design 中，Snackbar 是一种常用的用户提示工具，它可以在屏幕底部或顶部弹出，提醒用户操作完成或发生错误。Snackbar 不仅界面美观，而且交互友好。一般情况下，Snackbar 出现时会有动画效果，本文将介绍 Snackbar 的动画效果及实现方式。

Snackbar 的动画效果

Snackbar 的动画分为两个阶段：进入阶段和离开阶段。进入阶段包括从下方（或上方）移动到指定位置和渐变显示 Snackbar 的内容两个动画，离开阶段包括从指定位置移动到下方（或上方）和渐变隐藏 Snackbar 的内容两个动画，如图所示：

其中，进入阶段的动画包括 translateY() 和 alpha()，代码如下：

/* 进入阶段动画 */
.snackbar-enter {
  transform: translateY(100%); /* 移动到底部 */
  opacity: 0; /* 初始状态不可见 */
}
.snackbar-enter-active {
  transform: translateY(0); /* 移动到指定位置 */
  opacity: 1; /* 渐变显示 */
  transition: all 0.4s ease-out; /* 运动过渡效果 */
}

离开阶段的动画同样包括 translateY() 和 alpha()，代码如下：

/* 离开动画 */
.snackbar-leave {
  transform: translateY(0); /* 从指定位置移动 */
  opacity: 1; /* 初始状态可见 */
}
.snackbar-leave-active {
  transform: translateY(100%); /* 移动到底部 */
  opacity: 0; /* 渐变隐藏 */
  transition: all 0.4s ease-out; /* 运动过渡效果 */
}

Snackbar 的实现方式

根据官方文档，Snackbar 的实现方式分为两种：使用 Snackbar 组件和手动创建 Snackbar，下面将分别介绍。

使用 Snackbar 组件

Snackbar 组件是 Material-UI 框架中的一部分，使用起来非常简单。首先，需要引入 Snackbar 组件：

import Snackbar from '@material-ui/core/Snackbar';

然后，使用 <Snackbar> 标签定义 Snackbar，传递 open、onClose、message 等参数，具体如下：

const [open, setOpen] = useState(false);

const handleSnackbarClose = (event, reason) => {
  if (reason === 'clickaway') return;
  setOpen(false);
};

return (
  <Snackbar
    open={open}
    autoHideDuration={3000}
    onClose={handleSnackbarClose}
    message="This is a Snackbar message"
  />
);

在上述代码中，useState 定义了 open 状态，表示 Snackbar 是否打开，handleSnackbarClose 方法用于关闭 Snackbar。当点击 Snackbar 外部或过了自动隐藏时间后，会调用 onClose 方法回调。autoHideDuration 参数定义了 Snackbar 自动隐藏等待时间，单位为毫秒。

手动创建 Snackbar

相比较于使用 Snackbar 组件，手动创建 Snackbar 相对较为麻烦，但对于一些特殊场景（如需要自定义 Snackbar 样式等）非常有用。

首先，需要手动创建 Snackbar 的 HTML 标签，代码如下：

<div id="snackbar">
  This is a Snackbar message
</div>

需要注意的是，这里的 id 必须为 snackbar。接下来，在 JavaScript 中监听某些事件（如按钮点击事件），然后动态修改 Snackbar 的 transform 和 opacity 属性，具体代码如下：

const showMessage = () => {
  const snackbar = document.getElementById('snackbar');
  snackbar.style.transform = 'translateY(0)';
  snackbar.style.opacity = 1;
  setTimeout(() => {
    snackbar.style.transform = 'translateY(100%)';
    snackbar.style.opacity = 0;
  }, 3000);
};

上述代码中，showMessage 方法用于显示 Snackbar，首先获取 Snackbar 元素，然后将 transform 和 opacity 属性设置为进入阶段的最终值，等待 3000 毫秒后再将它们设置为离开阶段的最终值。

总结

本文介绍了 Material Design 中 Snackbar 的动画效果和实现方式，其中，Snackbar 的动画分为进入阶段和离开阶段，包括 translateY() 和 alpha() 动画。Snackbar 的实现方式有两种，使用 Snackbar 组件和手动创建 Snackbar，读者可以根据自己的需求选择适合自己的实现方式。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a467c2add4f0e0ffcad0db