解决Material-UI Snackbar进度条未完全显示即关闭的问题

本文旨在解决使用material-ui的snackbar组件时，其内部linearprogress进度条在消息关闭前未能完全显示至100%的问题。核心原因在于material-ui linearprogress组件的css过渡动画延迟。解决方案是调整计时器逻辑，将进度条的完成阈值从100%提高到110%，以补偿动画过渡所需的时间，确保视觉上进度条能够完整显示。

引言

在现代Web应用中，Toast或Snackbar通知是提升用户体验的重要组成部分。它们通常伴随着一个计时器和进度条，告知用户消息将在特定时间后自动关闭。然而，在实现此类功能时，开发者可能会遇到一个常见问题：尽管逻辑计时器已到期，但进度条在视觉上并未完全达到终点，消息却已关闭。本文将深入探讨在使用Material-UI的Snackbar和LinearProgress组件时出现此问题的原因，并提供一个精确的解决方案。

问题描述

当在React应用中使用Material-UI的Snackbar组件来显示队列消息，并在每个消息中嵌入一个LinearProgress组件作为自动关闭的视觉计时器时，可能会观察到以下现象：消息被设定在4秒后关闭，但进度条在到达100%之前就停止了动画，随即消息关闭。这导致用户体验不佳，因为进度条未能准确反映消息的生命周期。

问题的核心代码通常位于一个自定义的GenericSnackbarMessage组件中，该组件使用useEffect来管理一个基于setInterval的计时器，并更新LinearProgress的value属性。

// GenericSnackbarMessage.tsx 中的相关代码片段
useEffect(() => {
  if (!closeMessageAfterTime || !activeTimer || !isLastElement) return;

  const startTime = Date.now();
  const duration = 4000; // 消息持续时间

  const updateProgress = (): void => {
    const currentTime = Date.now();
    const elapsedTime = currentTime - startTime;
    const innerProgress = elapsedTime / duration * 100;

    setProgress(innerProgress >= 100 ? 100 : innerProgress);

    if (innerProgress >= 100 && elapsedTime >= duration) {
      console.log('Progress at timer end:', innerProgress);
      handleClose(); // 在这里关闭消息
    }
  };

  const timerId = setInterval(updateProgress, 100);

  return (): void => {
    clearInterval(timerId);
  };
}, [closeMessageAfterTime, activeTimer, isLastElement, handleClose]);

原因分析

经过分析，该问题并非计时器本身不准确，而是Material-UI LinearProgress组件内部的CSS过渡动画（css-transition）所导致的。Material-UI的LinearProgress组件在更新其value时，为了平滑地显示进度变化，会应用一个默认的过渡动画。例如，其内部的进度条元素可能包含类似以下CSS规则：

.css-8n2xj1-MuiLinearProgress-bar1 { /* 示例类名，实际可能不同 */
    /* ...其他样式... */
    transition: transform .4s linear; /* 关键：400毫秒的线性过渡 */
    /* ...其他样式... */
}

这意味着，当setProgress(100)被调用时，进度条的视觉动画从当前位置过渡到100%需要额外大约400毫秒的时间。如果handleClose()函数在逻辑上计算出innerProgress达到100%（即elapsedTime达到duration）后立即执行，那么在Snackbar关闭的那一刻，进度条的视觉动画可能尚未完全完成，从而导致进度条看起来没有跑满。

解决方案

为了解决这个视觉不同步的问题，我们需要调整计时器的关闭逻辑，使其在进度条的视觉动画有足够时间完成之后再触发handleClose()。考虑到LinearProgress的CSS过渡时间为400毫秒，我们可以在逻辑上延长进度条的“完成”时间，以弥补这部分延迟。

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

具体来说，如果消息的预期显示时长是4000毫秒（duration），而进度条的过渡动画需要额外400毫秒，那么总的视觉完成时间实际上是4400毫秒。我们可以通过将innerProgress的关闭阈值从100%调整到110%来实现这一点。

计算方式如下： 总视觉时间 = duration + transition-delay 总视觉时间 = 4000ms + 400ms = 4400ms

新的进度百分比阈值 = (总视觉时间 / duration) 100% 新的进度百分比阈值 = (4400ms / 4000ms) 100% = 1.1 * 100% = 110%

因此，当innerProgress达到或超过110%时，我们才触发handleClose()。

代码示例

以下是GenericSnackbarMessage组件中useEffect钩子的修改部分：

// GenericSnackbarMessage.tsx 中的 useEffect 钩子
useEffect(() => {
  if (!closeMessageAfterTime || !activeTimer || !isLastElement) return;

  const startTime = Date.now();
  const duration = 4000; // 消息持续时间

  const updateProgress = (): void => {
    const currentTime = Date.now();
    const elapsedTime = currentTime - startTime;
    const innerProgress = (elapsedTime / duration) * 100;

    // 更新进度条的值，确保不超过100
    setProgress(innerProgress >= 100 ? 100 : innerProgress);

    // 调整关闭条件：当逻辑进度达到110%时关闭，以补偿CSS过渡动画
    if (innerProgress >= 110 && elapsedTime >= duration) {
      console.log('Progress at timer end:', innerProgress);
      handleClose();
    }
  };

  const timerId = setInterval(updateProgress, 100);

  return (): void => {
    clearInterval(timerId);
  };
}, [closeMessageAfterTime, activeTimer, isLastElement, handleClose]);

通过将关闭条件从innerProgress >= 100更改为innerProgress >= 110，我们为进度条的视觉动画提供了足够的额外时间来完成，从而确保在消息关闭时，进度条能够完整地显示到100%。

注意事项与最佳实践

1. CSS过渡时间的动态性： 本解决方案依赖于Material-UI LinearProgress组件的默认CSS过渡时间。如果Material-UI版本更新或通过主题自定义了该组件的过渡时间，那么110%这个阈值可能需要相应调整。建议查阅Material-UI的官方文档或通过浏览器开发者工具检查实际的CSS过渡属性。
2. 组件解耦： 如果多个组件需要这种带有进度条的计时器功能，可以考虑将计时器和进度计算逻辑封装成一个自定义Hook，例如useTimedProgress，以提高代码复用性。
3. 用户体验： 确保进度条的动画是平滑且可预测的。过长的过渡时间可能导致用户等待过久，而过短则可能使动画看起来突兀。
4. 可配置性： 对于更灵活的组件，可以考虑将duration和额外的transitionDelay作为props传递，使得组件能够适应不同的场景和需求。

总结

在开发带有自动关闭计时器和进度条的UI组件时，理解并考虑CSS动画的过渡时间至关重要。Material-UI的LinearProgress组件因其内置的过渡动画，可能导致逻辑计时器与视觉进度条不同步。通过精确计算并调整关闭阈值，我们可以有效地补偿这种视觉延迟，确保用户界面在功能和美学上都表现一致。这种对细节的关注能够显著提升最终用户的使用体验。

以上就是解决Material-UI Snackbar进度条未完全显示即关闭的问题的详细内容，更多请关注php中文网其它相关文章！