React Js 精简 Toast 提示框 不使用jquery

本文出自：

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, options) {    //如果已经弹出一个了，那么就先移除，这边只会有一个    try {        document.body.removeChild(document.querySelector('div.toast-it'));    } catch (e) {    }    //开始创造    var timeout = timeout || 3000;    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%;    }}

使用

import {toastIt} from './toast/toast';toastIt(msg, 2500, {fontSize: '18px'});

本文参考自：

https://github.com/belfz/toastit.js

////17.6.12////

修改了弹出框z-index太小被其他控件挡住的尴尬.