2018/2/2 20:00:18当前位置推荐好文程序员浏览文章

前言

一直不习惯/不怎么会html中的toast的开发,尝试写过几次,自己都觉的不是很理想。刚好这次在一篇文章中看到了一种toast/snackbar的实现方法。借鉴亦记录。

基本方式还是先定义好html的css,然后通过后js动态添加/删除css样式,便可以实现toast/snackbar的显示和隐藏。在栗子中还添加了动画的部分。

直接上代码 - 细节慢慢体会

  • html部分

     <body>  <div class="container">      <h2>Snackbar / Toast</h2>      <p>在屏幕底部弹出消息,作用与使用方法都与Toast类似</p>      <p>点击按钮显示提示信息,3 秒后消失</p>      <button onclick="myFunction()">显示 Snackbar</button>  </div>  <div id="snackbar">一些文本..</div> </body>
  • CSS部分

    #snackbar {      visibility: hidden;      min-width: 250px;      margin-left: -125px;      background-color: #333;      color: #fff;      text-align: center;      border-radius: 2px;      padding: 16px;      position: fixed;      z-index: 1;      left: 50%;      bottom: 30px;      font-size: 17px;  }    #snackbar.show {      visibility: visible;      -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;      animation: fadein 0.5s, fadeout 0.5s 2.5s;  }    @-webkit-keyframes fadein {      from {          bottom: 0;          opacity: 0;      }      to {          bottom: 30px;          opacity: 1;      }  }    @keyframes fadein {      from {          bottom: 0;          opacity: 0;      }      to {          bottom: 30px;          opacity: 1;      }  }    @-webkit-keyframes fadeout {      from {          bottom: 30px;          opacity: 1;      }      to {          bottom: 0;          opacity: 0;      }  }    @keyframes fadeout {      from {          bottom: 30px;          opacity: 1;      }      to {          bottom: 0;          opacity: 0;      }  }
  • JS部分

    这个js方法,作用是:

  1. 通过id获取到指定的div
  2. 给div动态添加名为"show"的class
  3. 给定一个定时3000ms之后,移除div的class。

彩蛋:可以重构这个方法,给它两个参数,给它两个参数message和callback,分别动态给toast赋值,和toast消失之后的回调。 let myFunction = function(message, callback) {}; 具体实现可以尝试

  let myFunction = function() {        let x = document.getElementById("snackbar");        x.className = "show";        setTimeout(function() {            x.className = x.className.replace("show", "");        }, 3000);    };

结尾

不能忘了原作者

不能忘了原作者
HTML中的一种toast/snackbar

网友评论