本文出自：
http://blog.csdn.net/wyk304443164
效果图：
直接放代码，代码贼少。
toast.js
2017.6.9更新，如果多次调用自动删掉上一个，不会出现动画，这边使用的是try，因为没用Jquery不想处理remove报错了。
/** * Created by wuyakun on 2017/6/7. */ import './toast.less'; export let toastIt = function (text, timeout = 3000, options) { //如果已经弹出一个了，那么就先移除，这边只会有一个 try { document.body.removeChild(document.querySelector('div.toast-it')); } catch (e) { } //开始创造 let toast = document.createElement('DIV'); toast.classList.add('toast-it'); let content = document.createTextNode(text); toast.appendChild(content); toast.style.animationDuration = timeout / 1000 + 's'; for (let prop in options) { toast.style[prop] = options[prop]; } //别被挡住了 toast.style['z-index'] = 9999999; document.body.appendChild(toast); setTimeout(function () { try { document.body.removeChild(toast); } catch (e) { } }, timeout); };toast.less
.toast-it { background-color: #555555; color: #F4F4F4; padding: 3px 20px; border-radius: 20px; text-align: center; position: fixed; /* center horizontally */ top: 80%; left: 50%; transform: translate(-50%, -80%); animation-name: TOAST-APPEAR; animation-timing-function: ease-in; animation-duration: 3s; } @keyframes TOAST-APPEAR { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; top: 80%; } 100% { opacity: 0; top: 75%; } }使用React
import {toastIt} from './toast/toast'; toastIt(msg, 2500, {fontSize: '18px'});vue
import {toastIt} from '../util/toast' methods: { toast () { toastIt('ddd', 2500, {fontSize: '18px'}) } }本文参考自：
https://github.com/belfz/toastit.js
17.6.12
修改了弹出框z-index太小被其他控件挡住的尴尬.
