使用javascript实现简单的Toast功能

Toast.js 

//暴露给外部的方法
export default function (string, time) {
  time = time || 3;
  const message = new Message(string, time);
  message.showAndHide();
}

let Message = function (message, time) {
  this.message = message;
  this.time = time;
};

Message.prototype = {
  showAndHide() {
    //为Toast创建一个包裹和一个文字容器
    const messageWR = document.createElement('div')
    const messageEl = document.createElement('p');
    //比如你的WEB_APP 的根元素的id是main
    const main = document.getElementById('main');
    messageWR.appendChild(messageEl);       
    main.appendChild(messageWR);
    messageEl.innerHTML = this.message;    
    messageWR.className='tip-message-wrap'
    messageEl.className = 'tip-message';
    //在指定的时间后移除
    setTimeout(() => {
      messageWR.remove();
    }, this.time * 1000);
  },
};

Toast.css 

.tip-message-wrap{
    position: fixed;
    text-align: center;
    top:30%;
    left: 0;
    z-index: 99999999;
    width: 100%;
}

.tip-message {
    -webkit-animation-name: fadeInAndFadeOut;
    animation-name: fadeInAndFadeOut;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    pointer-events: none;
    margin: 0 auto;
    font-size: 13px;
    color: white;
    border-radius: 3px;
    line-height: 2;
    padding: 8px 30px;
    background-color: rgba(0,0,0,.7);
    display: inline-block;
}

@keyframes fadeInAndFadeOut {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
    80% {
        opacity: 1;
        /*transform: scale(1.1);*/
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeInAndFadeOut {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
    80% {
        opacity: 1;
        /*transform: scale(1.1);*/
    }
    100% {
        opacity: 1;
    }
}

 

 

 

在使用的时候就可以

import Toast from 'Toast';

Toast('透！',2)

大概在两秒后隐藏