universal-transition/lib/web/index.js

A universal transition API.

"use strict";

exports.__esModule = true;
exports.default = transition;

var _process = require("../process");

var __read = void 0 && (void 0).__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
      r,
      ar = [],
      e;

  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) {
      ar.push(r.value);
    }
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }

  return ar;
};

function transition(node, styles, options, callback) {
  var _a;

  if (!node) return;
  _a = __read((0, _process.processParams)(options, callback), 2), options = _a[0], callback = _a[1];
  styles = (0, _process.processStyle)(styles);
  var properties = Object.keys(styles);
  var duration = options.duration || 0; // ms

  var timingFunction = options.timingFunction || 'ease';
  var delay = options.delay || 0; // ms

  var transitionValue = properties.length ? properties.map(function (property) {
    return property + " " + duration + "ms " + timingFunction + " " + delay + "ms";
  }).join(',') : "all " + duration + "ms " + timingFunction + " " + delay + "ms";
  node.style.transition = transitionValue;
  node.style.webkitTransition = transitionValue;

  if (callback) {
    var transitionEndHandler_1 = function (e) {
      e.stopPropagation();
      node.removeEventListener('webkitTransitionEnd', transitionEndHandler_1);
      node.removeEventListener('transitionend', transitionEndHandler_1);
      node.style.transition = '';
      node.style.webkitTransition = '';
      callback();
    };

    node.addEventListener('webkitTransitionEnd', transitionEndHandler_1);
    node.addEventListener('transitionend', transitionEndHandler_1);
  }

  setTimeout(function () {
    for (var key in styles) {
      // TODO add vendor prefix
      var value = styles[key];
      node.style[key] = value;
    } // node.style.transition couldn't be set sync with target transition style, so there should settimeout 30ms

  }, 30);
}