如何使用 HMTL、CSS 和 JavaScript 创建 Snackbar？

网页设计中的Snackbars是显示在网站上的通知。有时开发人员希望向用户显示额外的通知，让他们知道某些重要但同时不应该影响用户体验的信息。该信息可以是关于网站内已经发生或将要发生的某种事件，无论它是否成功或需要一些快速的用户输入或干预。

Snackbar 通知用户网站将执行的流程或提供有关网站已经执行的流程的反馈。例如，不成功的 API 调用等。它们通常发生在网站内的屏幕底部，不应妨碍当前流程或用户体验。除非需要一些用户干预，否则它们通常会自行消失。 Snackbars 应该一次只显示一个以避免阻塞屏幕。它们通常包含单个操作，例如Dismiss/Cancel/Ok ，也可以用作错误处理的一部分。它们也可以由自定义操作触发，例如用户单击按钮时。

Bootstrap和jQuery通过类和插件为小吃栏通知提供了广泛的支持，但它们也可以在没有任何外部库的情况下通过仅使用HTML 、 CSS和JavaScript来设计和实现。同样重要的是要知道许多 Web 框架，例如 Angular 4+、ReactJS 等和 Android 应用程序也提供对 Snackbar 通知的支持，并且它们可以使用自己的类和方法来实现。详细解释请参考文章：

• 如何在 Android 中添加 Snackbar
• 如何创建 SnackBar 服务？

在本教程中，我们将仅使用 HTML、CSS 和 JavaScript 为网站实现 Snackbar 通知。
我们假设您熟悉 HTML 和 CSS 规则，并且对 CSS 动画有基本的了解。

• 第 1 步：使用npm安装Browsersync 。我们将使用Browsersync启动服务器并提供 URL 以查看 HTML 网站、CSS 动画并加载相应的 JavaScript 文件。我们将在全球安装Browsersync 。

  npm install -g browser-sync

• 第 2 步：在项目根文件夹中创建一个“index.html”文件、一个index.css文件和一个index.js 。
  • index.html：在该文件中添加以下代码片段。

    html

        
        
        GeeksforGeeks
        
        
    
    
        
         GeeksforGeeks - Snackbar using HTML, CSS & JS
        
      
        
        
             Show Snackbar
        
        Hello GeeksforGeeks
        
        

  • index.css：默认情况下，我们使用 CSS可见性属性将#snackbar HTML 元素设置为隐藏。我们还定义了位置：固定；和z-index: 1; Snackbar 通知的 CSS 属性，以便当它可见时，它将始终显示在用户的屏幕上方。请参阅代码注释以获得更好的理解。 !important CSS 属性声明将忽略 HTML DOM 元素上的所有其他冲突规则，并应用!important表示的规则。此规则覆盖所有之前设置的 CSS 规则。我们使用简单的 CSS 动画通过淡入屏幕和淡出屏幕向用户显示 Snackbar 通知。可以在此处找到对其的详细说明。为 CSS 动画设置的总时间取决于我们希望通知对用户可见的时间限制。在我们的例子中，通过从总时间中减去 0.5 秒来相应地计算淡出CSS 动画的时间。

    css

    #snackbar {
        /* By Default, Hidden */
        visibility: hidden; 
        min-width: 250px;
        background-color: #333;
        color: #fff;
        text-align: left;
        border-radius: 2px;
        padding: 16px;
        /* To always Keep on 
           Top of screen */
        position: fixed;
      
        /* To be displayed above 
           Parent HTML DOM element  */ 
        z-index: 1; 
      
        /* Position Bottom Left 
           Corner of Screen */
        left: 10px;
        bottom: 30px;
    }
      
    /* Dynamically Appending this 
       Class to #snackbar via JS */
    .show-bar {
        visibility: visible !important;
        /* fadeout Time decided in 
           accordance to Total Time */
        /* In case, Time = 3s, 
           fadeout 0.5s 2.5s */
        animation: fadein 0.5s, fadeout 0.5s 4.5s;
    }
      
    /* when the Snackbar Appears */
    @keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }
        to {
            bottom: 30px;
            opacity: 1;
        }
    }
      
    /* when the Snackbar Disappears
       from the Screen */
    @keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }
        to {
            bottom: 0;
            opacity: 0;
        }
    }
    

  • index.js：在单击Show Snackbar按钮时，我们使用 JavaScript 动态地将类附加到 HTML div元素。 showSnackbar()函数由onClick HTML Button 属性触发。动态附加的类，将 CSS 规则添加到#snackbar HTML 元素，使其对用户可见。我们已经使用setTimeout() JavaScript函数在 5 秒后动态删除先前附加的 Class，这将使 Snackar 通知消失。

    JS

    function showSnackbar() {
        var snackBar = 
          document.getElementById("snackbar")
        // Dynamically Appending class
        // to HTML element 
        snackBar.className = "show-bar";
      
        setTimeout(function () {
           // Dynamically Removing the Class 
           // from HTML element
           // By Replacing it with an Empty
           // String after 5 seconds
           snackBar.className = 
              snackBar.className.replace("show-bar", ""); 
        }, 5000);
    }
    

• 第 3 步：我们已经成功地使用 HTML、CSS 和 JavaScript 实现了 Snackbar 通知。在 HTML 中，我们定义了一个自定义的Show Snackbar按钮，它将触发屏幕上的 Snackbar 通知。 Snackbar 通知是向用户显示的简单文本消息。由于 Snackbar 是一个简单的 HTML “div”元素，我们可以向 Snackbar 通知添加自定义操作。例如，如果需要，“输入框”或“关闭按钮”。在我们的例子中，小吃栏通知将在 5 秒后自动从屏幕上消失。
  输出：
  
• 第 4 步：此时我们的 Snackbar 通知已准备就绪。要使用 Browsersync 启动应用程序，请在项目目录中运行以下命令，或者您可以直接在浏览器中运行 HTML 文件。

  browser-sync start --server --files "*"

  这将在服务器模式下启动 Browsersync 并监视目录中的所有文件以查看*通配符指定的更改。默认情况下，应用程序将在http://localhost:3000/ 上启动。

  输出：