weex-nuke/lib/Transition/transition.js

基于 Rax 、Weex 的高性能组件体系 ~~

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = transition;

var _nukeEnv = require('../Env/index.js');

var defaultOptions = {
  timingFunction: 'ease-in-out',
  duration: 500,
  needLayout: false,
  delay: 0
};
function transition(node, styles, options, callback) {
  if (typeof options == 'function' || options == null) {
    callback = options;
  }
  if (!node) return;
  // 健壮性提升
  options = Object.assign({}, defaultOptions, options);

  if (_nukeEnv.isWeex) {
    if (!node.ref) return;
    var animation = require('@weex-module/animation');
    animation.transition(node.ref, {
      styles: styles,
      timingFunction: options.timingFunction,
      delay: options.delay,
      duration: options.duration,
      needLayout: options.needLayout // 新增此 api
    }, callback || function () {});
  } else if (_nukeEnv.isWeb && node) {
    var duration = options.duration; // ms
    var timingFunction = options.timingFunction;
    var delay = options.delay; // ms
    var transitionValue = 'all ' + duration + 'ms ' + timingFunction + ' ' + delay + 'ms';

    node.style.transition = transitionValue;
    node.style.webkitTransition = transitionValue;

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

    for (var key in styles) {
      // TODO add vendor prefix
      var value = styles[key];
      node.style[key] = value;
    }
  }
}
module.exports = exports['default'];