html添加toast,iOS开发之HTML中的一种toast/snackbar

前言

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

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

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

html部分

Snackbar / Toast

在屏幕底部弹出消息,作用与使用方法都与Toast类似

点击按钮显示提示信息，3 秒后消失

显示 Snackbar

一些文本..

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方法，作用是：

通过id获取到指定的div

给div动态添加名为"show"的class

给定一个定时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);

};

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之IOS频道！