How to use style-unit - 10 common examples

setStyles(node, styles) {
    let newStyles = node.style;

    for (let prop in styles) {
      let val = styles[prop];
      newStyles[prop] = convertUnit(val, prop);
    }
    // Assign to style for trigger style update
    node.style = newStyles;
  }

setStyles(node, styles) {
    // TODO if more then one style update, call setStyles will be better performance
    for (let key in styles) {
      let val = styles[key];
      val = convertUnit(val, key);
      node.setStyle(key, val);
    }
  },

function setStyles(node, styles) {
  if (isWeb) {
    let tranformedStyles = {};
    for (let prop in styles) {
      let val = styles[prop];
      if (flexbox.isFlexProp(prop)) {
        flexbox[prop](val, tranformedStyles);
      } else {
        tranformedStyles[prop] = convertUnit(val, prop);
      }
    }
    for (let prop in tranformedStyles) {
      const transformValue = tranformedStyles[prop];
      // hack handle compatibility issue
      if (Array.isArray(transformValue)) {
        for (let i = 0; i < transformValue.length; i++) {
          node.style[prop] = transformValue[i];
        }
      } else {
        node.style[prop] = transformValue;
      }
    }
  } else if (isWeex) {
    shared.Host.driver.setStyle(node, styles);
  }

setStyles(node, styles) {
      let tranformedStyles = {};

      for (let prop in styles) {
        let val = styles[prop];
        tranformedStyles[prop] = convertUnit(val, prop);
      }

      for (let prop in tranformedStyles) {
        const transformValue = tranformedStyles[prop];
        // hack handle compatibility issue
        if (Array.isArray(transformValue)) {
          for (let i = 0; i < transformValue.length; i++) {
            node.style[prop] = transformValue[i];
          }
        } else {
          node.style[prop] = transformValue;
        }
      }
      // For trigger attribute mutation
      node.style.cssText = styleToCSS(node.style);
    },

export default function transition(node, styles, options, callback) {
  if (!node) return;

  if (typeof options == 'function' || options == null) {
    callback = options;
    options = {
      timingFunction: 'ease',
      duration: 0,
      delay: 0,
    };
  }

  for (let prop in styles) {
    styles[prop] = convertUnit(styles[prop], prop);
  }

  if (isWeex) {
    const animation = __weex_require__('@weex-module/animation');
    animation.transition(node.ref, {
      styles,
      timingFunction: options.timingFunction || 'linear',
      delay: options.delay || 0,
      duration: options.duration || 0,
      needLayout: options.needLayout || false
    }, callback || function() {});
  } else if (isWeb) {
    const properties = Object.keys(styles);
    const duration = options.duration || 0; // ms
    const timingFunction = options.timingFunction || 'linear';
    const delay = options.delay || 0; // ms

beforeRender() {
    // Turn off batched updates
    document.open();

    // Init rem unit
    setRem( this.getDeviceWidth() / this.getViewportWidth() );
  },

beforeRender() {
      // Init rem unit
      setRem(this.getDeviceWidth() / this.getViewportWidth());
    },

beforeRender() {
    // Init rem unit
    const rpxRadio = this.getDeviceWidth() / this.getViewportWidth();
    setRpx(rpxRadio);
    setDecimalPixelTransformer((rpx) => Math.floor(parseFloat(rpx) * rpxRadio) + 'px');
  }

beforeRender() {
      // Turn off batched updates
      document.open();
      // Init rem unit
      setRpx(1);
    },
    createElement(type, props = {}) {

beforeRender() {
    // Init rem unit
    const rpxRadio = this.getDeviceWidth() / this.getViewportWidth();
    setRpx(rpxRadio);
    setDecimalPixelTransformer((rpx) => Math.floor(parseFloat(rpx) * rpxRadio) + 'px');
  }