weex-nuke/lib/node_modules/nuke-transition/src/transition.js

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

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

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

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

    if (callback) {
      const transitionEndHandler = function (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 (const key in styles) {
      // TODO add vendor prefix
      let value = styles[key];
      node.style[key] = value;
    }
  }
}