移动端touch toast，依赖 jquery

toast.js

/**
 * @desc: Toast
 * @authors: yongxiang.li
 * @date: 2016-08-10 18:49:05
 *
 * Toast('message')
 */

// TODO 增加位置自定义

const Toast = function toast(message, options) {
  options = getOptions(options);
  this.delayTime = options.delay;
  this.position = POSITION[options.position];
  this.$wrap = [];
  this.init();
};

const docBody = document.body;
const POSITION = {
  TOP: {
    top: '20%',
  },
  MIDDLE: {
    top: '50%',
  },
  BOTTOM: {
    top: '80%',
  },
};

Toast.prototype = {
  constructor: Toast,

  init() {
    const wrap = document.querySelector('.js-tips-wrap_common_toast');
    if (wrap.length) {
      this.$wrap = wrap;
      return;
    }
    this.$wrap = document.createElement('div');
    this.$wrap.classList.add(
      'hide js-tips-wrap_common_toast tips-wrap_common_toast'
    );
    docBody.appendChild(this.$wrap);
  },

  template: '<div class="toast-wrap"><p class="toast">{{message}}</p></div>',

  _getTemplate() {
    if (this.template) {
      return this.template;
    }

    this.template =
      '<div class="toast-wrap"><p class="toast">{{message}}</p></div>';
  },

  animationend(wrap, animateName, cb) {
    wrap.one(
      'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
      function wrapone() {
        $(this).removeClass(animateName + ' animated');
      }
    );
  },

  show(message) {
    let template = this._getTemplate();
    let _html = template.replace(/{{message}}/g, message);
    let wrap = this.$wrap;
    const self = this;
    if (!wrap.length) {
      return;
    }

    wrap
      .html(_html)
      .removeClass('hide')
      .find('.toast-wrap')
      .addClass('bounceIn animated');

    wrap
      .find('.toast-wrap')
      .one(
        'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
        function() {
          $(this).removeClass('bounceIn animated');
          self.delayHide();
        }
      );
  },

  delayHide() {
    setTimeout(() => {
      this.doHide();
    }, this.delayTime);
  },

  doHide() {
    var wrap = this.$wrap;

    wrap
      .find('.toast-wrap')
      .one(
        'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
        function() {
          wrap.html('').addClass('hide');
        }
      );

    wrap.find('.toast-wrap').addClass('bounceOut animated');
  },
};

function getDefaultOpts() {
  return {
    delay: 1000,
  };
}

function getOptions(options) {
  options = options || {};
  return $.extend(getDefaultOpts(), options);
}

function startToast(message, conf) {
  var toast = new Toast(conf);
  toast.show(message);
}

startToast.create = function(conf) {
  return new Toast(conf);
};

// add Toast to globle namespace
window.Toast = startToast;

module.exports = startToast;