fix #48

Author: jljsj33

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-tween-one",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "tween-one anim component for react",
   "keywords": [
     "react",

src/plugin/StylePlugin.jsx

@@ -13,7 +13,7 @@ import {
   stylesToCss,
   createMatrix,
 } from 'style-utils';
-import { startConvertToEndUnit, getTransformValue } from '../util.js';
+import { startConvertToEndUnit, getTransformValue, styleValueToArray } from '../util.js';
 import _plugin from '../plugins';
 
 const StylePlugin = function (target, vars, type) {
@@ -27,14 +27,23 @@ StylePlugin.prototype = {
   name: 'style',
 };
 const p = StylePlugin.prototype;
-p.getTweenData = function (key, vars) {
+p.getTweenData = function (key, $vars) {
   const data = {
     data: {},
     dataType: {},
     dataUnit: {},
     dataCount: {},
     dataSplitStr: {},
   };
+  let vars = $vars;
+  if (styleValueToArray[key]) {
+    vars = vars.toString().split(' ');
+    vars = vars.map(c => (typeof $vars === 'number' ? `${c}px` : c));
+    vars[1] = vars[1] || vars[0];
+    vars[2] = vars[2] || vars[0];
+    vars[3] = vars[3] || vars[1] || vars[0];
+    vars = vars.join(' ');
+  }
   if (key.match(/colo|fill|storker/i)) {
     data.data[key] = parseColor(vars);
     data.dataType[key] = 'color';
@@ -46,7 +55,7 @@ p.getTweenData = function (key, vars) {
     data.dataType[key] = 'shadow';
   } else if (typeof vars === 'string' && vars.split(/[\s|,]/).length > 1) {
     data.data[key] = vars.split(/[\s|,]/);
-    data.dataSplitStr[key] = vars.replace(/[^\s|,]/g, '');
+    data.dataSplitStr[key] = vars.replace(/[^\s|,]/g, '').replace(/\s+/g, ' ');
     data.dataType[key] = 'string';
   } else {
     data.data[key] = vars;

src/util.js

@@ -16,6 +16,13 @@ export const transformOrFilter = {
   '-webkit-filter': 1
 };
 
+export const styleValueToArray = {
+  margin: 1,
+  padding: 1,
+  borderWidth: 1,
+  borderRadius: 1
+}
+
 export function toArrayChildren(children) {
   const ret = [];
   React.Children.forEach(children, (c) => {

tests/tweenOne.spec.jsx

@@ -104,14 +104,14 @@ describe('rc-tween-one', () => {
         width: '10vh',
         height: '100%',
         boxShadow: '0 0 30px rgba(255,125,0,0.5)',
-        marginLeft: '30rem',
+        margin: '30rem',
         scale: 1.5,
         x: '+=100',
         transformOrign: '30% 10%',
         delay: 100,
         yoyo: true,
       },
-      style: { top: 0, left: '10vw', width: '5vh', height: '10%', marginLeft: '10rem' },
+      style: { top: 0, left: '10vw', width: '5vh', height: '10%', margin: '10rem' },
     });
     const child = TestUtils.findRenderedDOMComponentWithTag(instance, 'div');
     console.log('start:', child.style.top);