如何实现含动画效果的 Material Design 中的 Snackbar

Snackbar 是 Material Design 中的一种弹出式交互控件，可以在屏幕底部或顶部弹出一条消息，类似于 Toast，但具有更加复杂的 UI 和交互特性。Snackbar 通常用于提示用户操作的状态或重要事件，并且支持包含图标、动作按钮等多种内容。

本文将介绍如何使用 HTML、CSS 和 JavaScript 实现含动画效果的 Material Design 中的 Snackbar。

实现思路

Snackbar 的实现可以分为以下三个部分：

  1. HTML 结构：Snackbar 包含消息内容、动作按钮等多个元素，需要用 HTML 定义它们的关系和样式。
  2. CSS 样式：Snackbar 包含很多动画效果，需要使用 CSS 规定它们的动画过渡、位置、尺寸和颜色等。
  3. JavaScript 控制：Snackbar 需要在页面加载时自动弹出并且能够接受用户的交互操作，需要使用 JavaScript 实现自动弹出和多种交互效果。

下面我们将分别介绍这三个方面的实现细节。

HTML 结构

Snackbar 的 HTML 结构主要包括以下几个部分：

  1. 消息内容：用一个 div 元素包含消息内容，可以使用标签、文本和图标等。
  2. 动作按钮：可以选择包含一个动作按钮，用于用户点击后执行操作，通常放在消息内容之后。
  3. 关闭按钮：Snackbar 包含一个关闭按钮，用于用户手动关闭它，通常放在消息内容之后。
  4. 容器元素：Snackbar 要放在页面的底部或顶部，需要使用一个固定定位的容器元素作为其父元素。

下面是一个简单的 Snackbar 的 HTML 结构示例：

---- ---------------------------
  ---- -------------------------
    -------------------
  ------
  ---- ------------------------
    -------------------
  ------
  ---- -------------------------------------
------

CSS 样式

Snackbar 的 CSS 样式主要包括以下几个部分：

  1. 位置和尺寸：Snackbar 要定位在屏幕的底部或顶部，需要使用绝对定位或固定定位实现。另外，Snackbar 的尺寸可以根据内容的宽度和高度自适应。
  2. 动画效果：Snackbar 的出现、消失和用户交互过程需要使用 CSS 动画实现，包括渐显、渐隐、上下移动等效果。
  3. 颜色和特效：Snackbar 的颜色和特效可以使用 Material Design 风格的颜色和阴影实现。

下面是一个简单的 Snackbar 的 CSS 样式示例：

------------------- -
  --------- ------
  ------- --
  ------ -----
  -------- ----- ----
  ----------- - - ---- ------- -- -- -----
  ----------------- -----
  ---------- --------- ---- ---------
  -------------------- ---------
-

----------------- -
  -------- -------------
  ------------- ----
-

---------------- -
  -------- -------------
-

--------------- -
  --------- ---------
  ---- ------
  ------ ------
  ---------- -------
  ------- --------
  ---------- -------- ---- ---------
  -------------------- ---------
-

---------- --------- -
  ---- -
    ---------- -----------------
  -
  -- -
    ---------- ---------------
  -
-

---------- ---------- -
  ---- -
    ---------- ---------------
  -
  -- -
    ---------- -----------------
  -
-

---------- -------- -
  ---- -
    ---------- ----------
  -
  -- -
    ---------- --------------
  -
-

---------- --------- -
  ---- -
    ---------- --------------
  -
  -- -
    ---------- ----------
  -
-

这里定义了一个 .snackbar-container 的容器元素，和三个 .snackbar-message、.snackbar-action、.snackbar-close 的子元素。.snackbar-message 和 .snackbar-action 定义了消息内容和动作按钮的布局，.snackbar-close 定义了关闭按钮的样式。而.animateIn、.animateOut、.rotateIn、.rotateOut 则分别定义了出现、消失和关闭按钮旋转的动画效果。

JavaScript 控制

Snackbar 的 JavaScript 控制主要要实现以下几个功能：

  1. 自动弹出：Snackbar 要在页面加载时自动弹出，可以在页面加载完成时执行一个 JavaScript 函数来实现。
  2. 自动关闭：Snackbar 弹出后要自动关闭，可以使用 setTimeout() 来等待一定时间后自动关闭。
  3. 手动关闭：Snackbar 要支持用户手动关闭，可以给关闭按钮添加点击事件来实现。
  4. 动作按钮：Snackbar 的动作按钮要支持点击事件和回调函数，可以通过参数传递回调函数和事件处理逻辑。

下面是一个简单的 Snackbar 的 JavaScript 控制示例：

-------- --------------------- ------- --------- -
  --- --------- - ------------------------------
  ------------------- - ---------------------
  --- ---------- - ------------------------------
  -------------------- - -------------------
  -------------------- - --------
  --- --------- - -----
  -- -------- -
    --------- - ------------------------------
    ------------------- - ------------------
    --- ------ - ---------------------------------
    ---------------- - -------
    -------------- - -------- -- -
      -----------
      ------------------------
    --
    ------------------------------
  -
  --- -------- - ------------------------------
  ------------------ - -----------------
  ------------------ - -----------
  ---------------- - -------- -- -
    ------------------------
  --
  ----------------------------------
  -- ----------- -
    ---------------------------------
  -
  --------------------------------
  -------------------------------------
  ------------------- -- -
    ------------------------
  -- ------
-

-------- ----------------------- -
  --------------------------------------
  ------------------------------------------ -------- -- -
    -------------------
  ---
-

这里定义了一个 showSnackbar() 函数来创建 Snackbar，它接受三个参数，分别是消息内容、动作按钮内容和回调函数。在函数内部，首先创建一个 .snackbar-container 的容器元素，然后根据参数创建消息内容、动作按钮等元素，最后添加到容器元素中，并将容器元素添加到body中。同时通过 setTimeout() 定时器来控制 Snackbar 自动关闭。

最后定义了一个 hideSnackbar() 函数，用于处理 Snackbar 的关闭效果。在这个函数中通过给容器元素添加 .animateOut 类，来触发 CSS 动画，并在动画结束后将容器元素从页面中删除。

示例代码

下面是一个完整的含动画效果的 Material Design 中的 Snackbar 的示例代码，可以直接运行在浏览器中。

--------- -----
------
------
  -----------------------
  -------
    ------------------- -
      --------- ------
      ------- --
      ------ -----
      -------- ----- ----
      ----------- - - ---- ------- -- -- -----
      ----------------- -----
      ---------- --------- ---- ---------
      -------------------- ---------
    -

    ----------------- -
      -------- -------------
      ------------- ----
    -

    ---------------- -
      -------- -------------
    -

    --------------- -
      --------- ---------
      ---- ------
      ------ ------
      ---------- -------
      ------- --------
      ---------- -------- ---- ---------
      -------------------- ---------
    -

    ---------- --------- -
      ---- -
        ---------- -----------------
      -
      -- -
        ---------- ---------------
      -
    -

    ---------- ---------- -
      ---- -
        ---------- ---------------
      -
      -- -
        ---------- -----------------
      -
    -

    ---------- -------- -
      ---- -
        ---------- ----------
      -
      -- -
        ---------- --------------
      -
    -

    ---------- --------- -
      ---- -
        ---------- --------------
      -
      -- -
        ---------- ----------
      -
    -
  --------
-------
------
  ------- ------------------------------- ----- -------------------------------------- -----------------
  --------
    -------- --------------------- ------- --------- -
      --- --------- - ------------------------------
      ------------------- - ---------------------
      --- ---------- - ------------------------------
      -------------------- - -------------------
      -------------------- - --------
      --- --------- - -----
      -- -------- -
        --------- - ------------------------------
        ------------------- - ------------------
        --- ------ - ---------------------------------
        ---------------- - -------
        -------------- - -------- -- -
          -----------
          ------------------------
        --
        ------------------------------
      -
      --- -------- - ------------------------------
      ------------------ - -----------------
      ------------------ - -----------
      ---------------- - -------- -- -
        ------------------------
      --
      ----------------------------------
      -- ----------- -
        ---------------------------------
      -
      --------------------------------
      -------------------------------------
      ------------------- -- -
        ------------------------
      -- ------
    -

    -------- ----------------------- -
      --------------------------------------
      ------------------------------------------ -------- -- -
        -------------------
      ---
    -
  ---------
-------
-------

总结

通过本文的介绍，我们了解了如何使用 HTML、CSS 和 JavaScript 实现含动画效果的 Material Design 中的 Snackbar。Snackbar 具有复杂的 UI 和交互特性，涉及到 HTML、CSS 和 JavaScript 的多个方面，需要具备一定的前端开发能力才能很好地实现它。但是，掌握 Snackbar 的技术原理和实现方法，对于提升前端开发能力和应用 Material Design 风格有重要的学习和指导意义。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/659e6054add4f0e0ff759c7d

阅读全文

猜你喜欢

  • React 单元测试利器 Enzyme 入门指南

    作为前端开发人员，单元测试是我们日常开发不可或缺的一部分。而针对 React 的单元测试，我们有一个非常强大的利器——Enzyme。Enzyme 是 AirBnb 开发的一个 React 测试工具，可...

    9 个月前
  • Jest 测试时如何 mock 掉 React 组件的生命周期？

    随着前端技术的发展，越来越多的新技术被采用到我们的工作中。在开发过程中，我们经常需要使用到测试工具来确保代码质量，而测试时mock掉React组件生命周期函数是一个非常实用的技巧。

    9 个月前
  • 如何在 Deno 中使用 JWT 进行用户认证和权限控制？

    在 Web 应用开发过程中，用户认证和权限控制是非常重要的功能，通常我们使用 JWT（JSON Web Token）来实现这些功能。那么，如何在 Deno 中使用 JWT 进行用户认证和权限控制呢？接...

    9 个月前
  • 在使用 CSS Reset 时注意列表样式的影响

    在使用 CSS Reset 时注意列表样式的影响 在 web 前端开发中，CSS Reset 是重要的一环。通常情况下，我们会使用 CSS Reset 来清除浏览器的默认样式，以确保我们的网页在不同浏...

    9 个月前
  • 如何解决在 Vue 中使用 TypeScript 时出现的错误提示？

    在前端开发中，Vue.js 和 TypeScript 越来越受到开发者的青睐。Vue.js 是一个简单、快速、灵活且可扩展的 JavaScript 框架，而 TypeScript 则是一种强类型、面向...

    9 个月前
  • 如何使用 ES8 的 Trailing commas 解决 JavaScript 数组和对象的语法错误

    前言 在 JavaScript 中，数组和对象是两种常用的数据类型。它们支持存储和操作一组数据。但是，在操作过程中可能会犯一些语法错误，例如最后一个元素后面多一个逗号。

    9 个月前
  • 如何在 Vue.js 项目中有效利用虚拟 DOM 技术

    在 Vue.js 中，虚拟 DOM 是其最为核心的技术之一，它的作用是将数据和视图进行分离，通过对数据的操作来实现页面的渲染更新。本文将为大家介绍在 Vue.js 项目中如何有效利用虚拟 DOM 技术...

    9 个月前
  • Angular HttpClient 拦截器使用详解

    Angular 的 HttpClient 是一个非常强大的 HTTP 客户端，能够提供丰富的 HTTP 请求和响应的处理能力。在实际应用中，我们通常需要对 HTTP 请求进行一些共同的处理，比如添加请...

    9 个月前
  • Next.js 的外链引入样式问题及解决方法

    Next.js 的外链引入样式问题及解决方法 前言 Next.js 是一个非常流行的 React 框架，它通过其强大的路由功能、静态生成和服务端渲染等特性，可以帮助我们构建出高效、灵活的应用。

    9 个月前
  • PhantomJS、Karma、ESLint、babel-plugin-istanbul 代码覆盖率问题

    PhantomJS、Karma、ESLint、babel-plugin-istanbul 代码覆盖率问题 在前端开发中，代码覆盖率是一种重要指标。它表示测试中代码被执行到的比例，能够帮助我们判断测试用...

    9 个月前
  • 如何在 Mocha 测试框架中使用 Sinon 进行 Stub 测试

    如何在 Mocha 测试框架中使用 Sinon 进行 Stub 测试 在前端开发中，测试是一个不可避免的过程。Mocha 是一个流行的 JavaScript 测试框架，而 Sinon 是一个独立于任何...

    9 个月前
  • 在 Web Components 中如何使用 Web Worker 来提高性能

    Web Components 是一项新兴的前端技术，通过封装 HTML、CSS 和 JavaScript，可以创建可复用的自定义组件，从而提高开发效率和代码可维护性。

    9 个月前
  • 解决 Redux 报错 TypeError: Cannot read property 'connect' of undefined

    当使用 react-redux 库的 connect 函数连接 redux 状态管理器时，有时会遇到报错 TypeError: Cannot read property 'connect' of un...

    9 个月前
  • Sequelize 中如何实现模型实例的更新和保存

    Sequelize 是一个基于 Node.js 的 ORM 框架，用于与各种 SQL 数据库进行交互。在使用 Sequelize 操作数据库时，我们经常需要更新和保存模型实例，因为这可以让我们持久化我...

    9 个月前
  • 基于 Server-sent Events(SSE) 和 WebSocket 的即时通讯系统开发

    在现如今高速发展的互联网时代，即时通讯成为了人们生活中不可或缺的一部分。前端开发人员也逐渐开始关注和涉及到即时通讯系统的开发。两种不同的即时通讯技术 Server-sent Events(SSE) 和...

    9 个月前
  • webpack 打包时提示 Module build failed？？

    最近使用 webpack 打包项目时，发现有时候会出现 "Module build failed" 的错误提示，这个问题实际上涉及到 webpack 的模块解析、loader 版本兼容性以及环境配置等...

    9 个月前
  • 在 Docker 容器中安装和使用 Redis 数据库的方法

    Redis 是一种开源的，基于内存的数据结构存储系统，被广泛应用于实时数据缓存、消息队列、后台任务处理等场景。随着 Docker 技术的普及，可以方便地将 Redis 进行容器化部署和管理。

    9 个月前
  • PM2 部署 Node.js 应用遇到跨域问题的解决方法

    前言 Node.js 作为一种轻量级的后端服务开发语言，在 Web 开发中得到越来越广泛的应用。然而，跨域问题是经常会遇到的一个麻烦。本文将介绍在使用 PM2 部署 Node.js 应用的过程中遇到跨...

    9 个月前
  • ES11 中解决类 init 方法和构造函数的区别

    在 ES6 中引入了 class 关键字来定义类，而 init 方法被用来代替了传统的构造函数。ES11 引入了新的语法支持直接声明构造函数，这样解决了类 init 方法和构造函数的区别问题。

    9 个月前
  • Memcached 性能优化技巧：提升秒杀系统响应速度

    在高并发系统中，如何保证数据的读取速度？这是所有开发人员所面临的一个问题。而 Memcached 就是一种可行的解决方案。它是一种高速缓存系统，用于存储任意类型的数据，将数据缓存到内存中，以提高数据访...

    9 个月前

相关推荐

    暂无文章