SOURCE

var toast = function(params){
    var el = document.createElement("div");
    el.setAttribute("id","toast");
    el.innerHTML = params.message;
    document.body.appendChild(el);
    el.classList.add("fadeIn");
    el.classList.add("success");
    setTimeout(function(){
      el.classList.remove("fadeIn");
      el.classList.add("fadeOut");
      el.addEventListener("animationend", function(){
        el.classList.add("hide");
      });
    },params.time);
  };
  
  //使用
  toast({
    message:"提交成功",
    time:1500
  });

 @keyframes fadeIn {
     0% {
         opacity: 0
     }
     100% {
         opacity: 1
     }
 }
 
 @-webkit-keyframes fadeIn {
     0% {
         opacity: 0
     }
     100% {
         opacity: 1
     }
 }
 
 @-moz-keyframes fadeIn {
     0% {
         opacity: 0
     }
     100% {
         opacity: 1
     }
 }
 
 @-o-keyframes fadeIn {
     0% {
         opacity: 0
     }
     100% {
         opacity: 1
     }
 }
 
 @-ms-keyframes fadeIn {
     0% {
         opacity: 0
     }
     100% {
         opacity: 1
     }
 }
 
 @keyframes fadeOut {
     0% {
         opacity: 1
     }
     100% {
         opacity: 0
     }
 }
 
 @-webkit-keyframes fadeOut {
     0% {
         opacity: 1
     }
     100% {
         opacity: 0
     }
 }
 
 @-moz-keyframes fadeOut {
     0% {
         opacity: 1
     }
     100% {
         opacity: 0
     }
 }
 
 @-o-keyframes fadeOut {
     0% {
         opacity: 1
     }
     100% {
         opacity: 0
     }
 }
 
 @-ms-keyframes fadeOut {
     0% {
         opacity: 1
     }
     100% {
         opacity: 0
     }
 }
 
 #toast {
     min-width: 380px;
     color: #fff;
     font-size: 14px;
     line-height: 1;
     padding: 10px;
     border-radius: 3px;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     z-index: 9999;
 }
 
 .hide {
     display: none;
 }
 
 .fadeOut {
     animation: fadeOut .5s;
 }
 
 .fadeIn {
     animation: fadeIn .5s;
 }
 
 .success {
     background: #00b462
 }
 
 .error {
     background: #f44336
 }