react-smooth - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

CHANGELOG.md

@@ -0,1 +1,6 @@
+### 0.0.10 / 2016-02-17
+===
+- refactor: remove lodash compose method
+- refactor: refactor configUpdate.js
+
 ### 0.0.9 / 2016-02-05
@@ -2,0 +7,0 @@ ===

demo/Gossip/app.js

@@ -5,3 +5,43 @@ import Animate from 'react-smooth';
 
-const point = (x, y) => {
+const getSTEPS = onAnimationEnd => [{
+  duration: 1000,
+  style: {
+    opacity: 0,
+  },
+}, {
+  duration: 1000,
+  style: {
+    opacity: 1,
+    transform: 'rotate(0deg) translate(0px, 0px)',
+  },
+  easing: 'ease-in',
+}, {
+  duration: 1000,
+  style: {
+    transformOrigin: '110px 110px',
+    transform: 'rotate(500deg) translate(0px, 0px)',
+  },
+  easing: 'ease-in-out',
+}, {
+  duration: 2000,
+  style: {
+    transformOrigin: '610px 610px',
+    transform: 'rotate(1440deg) translate(500px, 500px)',
+  },
+}, {
+  duration: 50,
+  style: {
+    transformOrigin: 'center center',
+    transform: 'translate(500px, 500px) scale(1)',
+  },
+  onAnimationEnd,
+}, {
+  duration: 1000,
+  style: {
+    transformOrigin: 'center center',
+    transform: 'translate(500px, 500px) scale(1.6)',
+  },
+}];
+
+const createPoint = (x, y) => {
   const currX = x;
@@ -25,6 +65,8 @@ const currY = y;
 
-  state = { canBegin: false };
+  constructor(props, ctx) {
+    super(props, ctx);
 
-  componentDidMount() {
-    this.setState({ canBegin: true });
+    this.state = { canBegin: false };
+    this.handleTextAniamtionBegin = this.handleTextAniamtionBegin.bind(this);
+    this.STEPS = getSTEPS(this.handleTextAniamtionBegin);
   }
@@ -39,3 +81,3 @@
 
-    const centers = [point(cx, cy - sr), point(cx, cy + sr)];
+    const centers = [createPoint(cx, cy - sr), createPoint(cx, cy + sr)];
     const circles = centers.map((p, i) =>
@@ -58,4 +100,4 @@ p.getCircle({
 
-    const beginPoint = point(cx, cy - r);
-    const endPoint = point(cx, cy + r);
+    const beginPoint = createPoint(cx, cy - r);
+    const endPoint = createPoint(cx, cy + r);
     const move = beginPoint.getPath('M');
@@ -71,3 +113,4 @@ const A = getArcPath(sr, 0, 0, 0, cx, cy);
     return (
-      <Animate begin={5000}
+      <Animate canBegin={this.state.canBegin}
+        duration={1000}
         from={{ opacity: 0, transform: 'scale(1)' }}
@@ -84,44 +127,5 @@ to={{ opacity: 1, transform: 'scale(1.5)' }}
   render() {
-    const steps = [{
-      moment: 1000,
-      style: {
-        opacity: 0,
-      },
-    }, {
-      moment: 2000,
-      style: {
-        opacity: 1,
-        transform: 'rotate(0deg) translate(0px, 0px)',
-      },
-      easing: 'ease-in',
-    }, {
-      moment: 3000,
-      style: {
-        transformOrigin: '110px 110px',
-        transform: 'rotate(500deg) translate(0px, 0px)',
-      },
-      easing: 'ease-in-out',
-    }, {
-      moment: 5000,
-      style: {
-        transformOrigin: '610px 610px',
-        transform: 'rotate(1440deg) translate(500px, 500px)',
-      },
-    }, {
-      moment: 5050,
-      style: {
-        transformOrigin: 'center center',
-        transform: 'translate(500px, 500px) scale(1)',
-      },
-    }, {
-      moment: 5500,
-      style: {
-        transformOrigin: 'center center',
-        transform: 'translate(500px, 500px) scale(1.6)',
-      },
-    }];
-
     return (
       <svg width="1000" height="1000">
-        <Animate steps={steps} >
+        <Animate steps={this.STEPS} >
           <g className="gossip">
@@ -137,4 +141,10 @@ <circle cx="110" cy="110" r="100" style={{ stroke: 'black', fill: 'white' }} />
   }
+
+  handleTextAniamtionBegin() {
+    this.setState({
+      canBegin: true,
+    });
+  }
 }
 
 ReactDom.render(<Gossip />, document.getElementById('app'));

demo/GroupAnimation/app.js

@@ -69,3 +69,3 @@ import React, { Component } from 'react';
     const leaveSteps = [{
-      moment: 0,
+      duration: 0,
       style: {
@@ -75,3 +75,3 @@ transform: 'translateX(0)',
     }, {
-      moment: 1000,
+      duration: 1000,
       style: {
@@ -82,3 +82,3 @@ transform: 'translateX(302px)',
     }, {
-      moment: 2000,
+      duration: 1000,
       style: {
@@ -85,0 +85,0 @@ height: 0,

es6/Animate.js

@@ -55,4 +55,2 @@ 'use strict';
 
-var MIN_TIME = 50;
-
 var Animate = (0, _pureRenderDecorator2.default)(_class = (_temp = _class2 = function (_Component) {
@@ -184,5 +182,7 @@ _inherits(Animate, _Component);
       var steps = props.steps;
+      var begin = props.begin;
       var _steps$ = steps[0];
       var initialStyle = _steps$.style;
-      var initialTime = _steps$.moment;
+      var _steps$$duration = _steps$.duration;
+      var initialTime = _steps$$duration === undefined ? 0 : _steps$$duration;
 
@@ -194,3 +194,3 @@ var addStyle = function addStyle(sequence, nextItem, index) {
 
-        var moment = nextItem.moment;
+        var duration = nextItem.duration;
         var _nextItem$easing = nextItem.easing;
@@ -204,3 +204,2 @@ var easing = _nextItem$easing === undefined ? 'ease' : _nextItem$easing;
         var properties = nextProperties || (0, _util.getIntersectionKeys)(preItem.style, style).map(_util.getDashCase);
-        var duration = moment - preItem.moment;
 
@@ -233,3 +232,3 @@ if (typeof easing === 'function') {
 
-      return this.manager.start([].concat(_toConsumableArray(steps.reduce(addStyle, [initialStyle, Math.max(initialTime, MIN_TIME)])), [props.onAnimationEnd]));
+      return this.manager.start([].concat(_toConsumableArray(steps.reduce(addStyle, [initialStyle, Math.max(initialTime, begin)])), [props.onAnimationEnd]));
     }
@@ -272,3 +271,3 @@ }, {
 
-      manager.start([from, Math.max(begin, MIN_TIME), _extends({}, to, { transition: transition }), duration, onAnimationEnd]);
+      manager.start([from, begin, _extends({}, to, { transition: transition }), duration, onAnimationEnd]);
     }
@@ -348,3 +347,3 @@ }, {
   steps: _react.PropTypes.arrayOf(_react.PropTypes.shape({
-    moment: _react.PropTypes.number.isRequired,
+    duration: _react.PropTypes.number.isRequired,
     style: _react.PropTypes.object.isRequired,
@@ -351,0 +350,0 @@ easing: _react.PropTypes.oneOfType([_react.PropTypes.oneOf(['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear']), _react.PropTypes.func]),

es6/AnimateManager.js

 'use strict';
 
-var _compose = require('lodash/fp/compose');
-
-var _compose2 = _interopRequireDefault(_compose);
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -15,2 +11,6 @@
 
+var _raf = require('raf');
+
+var _raf2 = _interopRequireDefault(_raf);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -67,3 +67,3 @@
       });
-      _setStyle = _compose2.default.apply(undefined, _toConsumableArray(chain))(manager.setStyle);
+      _setStyle = _util.compose.apply(undefined, _toConsumableArray(chain))(manager.setStyle);
 
@@ -110,6 +110,12 @@ return _extends({}, manager, {
         timeout = setTimeout(function () {
-          var res = callback(style);
-          resolve();
+          // set style in next frame to avoid batch set style
+          var res = null;
 
-          return res;
+          (0, _raf2.default)(function () {
+            (0, _raf2.default)(function () {
+              res = callback(style);
+              resolve();
+              return res;
+            });
+          });
         }, delay);
@@ -162,4 +168,4 @@ });
  */
-var finalCreateAniamteManager = (0, _compose2.default)(applyMiddleware(setStyleAsync, sequenceMiddleware, thunkMiddeware))(createAnimateManager);
+var finalCreateAniamteManager = (0, _util.compose)(applyMiddleware(setStyleAsync, sequenceMiddleware, thunkMiddeware))(createAnimateManager);
 
 exports.default = finalCreateAniamteManager;

es6/configUpdate.js

@@ -84,2 +84,3 @@ 'use strict';
   }, {});
+
   var stepperStyle = interKeys.reduce(function (res, key) {
@@ -93,59 +94,57 @@ return _extends({}, res, _defineProperty({}, key, {
   var cafId = -1;
-  var _update2 = function update() {};
   var preTime = undefined;
   var beginTime = undefined;
 
+  var getCurrStyle = function getCurrStyle() {
+    return (0, _util.mapObject)(function (key, val) {
+      return val.from;
+    }, stepperStyle);
+  };
+  var shouldStopAnimation = function shouldStopAnimation() {
+    return !(0, _filter2.default)(stepperStyle, needContinue).length;
+  };
+
   // stepper timing function like spring
-  if (easing.isStepper) {
-    (function () {
-      var getCurrStyle = function getCurrStyle() {
-        return (0, _util.mapObject)(function (key, val) {
-          return val.from;
-        }, stepperStyle);
-      };
-      var shouldStopAnimation = function shouldStopAnimation() {
-        return !(0, _filter2.default)(stepperStyle, needContinue).length;
-      };
+  var stepperUpdate = function stepperUpdate(now) {
+    if (!preTime) {
+      preTime = now;
+    }
+    var deltaTime = now - preTime;
+    var steps = deltaTime / easing.dt;
 
-      _update2 = function update(now) {
-        if (!preTime) {
-          preTime = now;
-        }
-        var deltaTime = now - preTime;
-        var steps = deltaTime / easing.dt;
+    stepperStyle = calStepperVals(easing, stepperStyle, steps);
+    // get union set and add compatible prefix
+    render((0, _util.translateStyle)(_extends({}, from, to, getCurrStyle(stepperStyle))));
 
-        stepperStyle = calStepperVals(easing, stepperStyle, steps);
-        // get union set and add compatible prefix
-        render((0, _util.translateStyle)(_extends({}, from, to, getCurrStyle(stepperStyle))));
+    preTime = now;
 
-        preTime = now;
+    if (!shouldStopAnimation()) {
+      cafId = (0, _raf2.default)(update);
+    }
+  };
 
-        if (!shouldStopAnimation()) {
-          cafId = (0, _raf2.default)(_update2);
-        }
-      };
-    })();
-  } else {
-    // t => val timing function like cubic-bezier
-    _update2 = function _update(now) {
-      if (!beginTime) {
-        beginTime = now;
-      }
+  // t => val timing function like cubic-bezier
+  var timingUpdate = function timingUpdate(now) {
+    if (!beginTime) {
+      beginTime = now;
+    }
 
-      var t = (now - beginTime) / duration;
-      var currStyle = (0, _util.mapObject)(function (key, val) {
-        return alpha.apply(undefined, _toConsumableArray(val).concat([easing(t)]));
-      }, timingStyle);
-      // get union set and add compatible prefix
-      render((0, _util.translateStyle)(_extends({}, from, to, currStyle)));
+    var t = (now - beginTime) / duration;
+    var currStyle = (0, _util.mapObject)(function (key, val) {
+      return alpha.apply(undefined, _toConsumableArray(val).concat([easing(t)]));
+    }, timingStyle);
 
-      if (t < 1) {
-        cafId = (0, _raf2.default)(_update2);
-      }
-    };
-  }
+    // get union set and add compatible prefix
+    render((0, _util.translateStyle)(_extends({}, from, to, currStyle)));
 
+    if (t < 1) {
+      cafId = (0, _raf2.default)(update);
+    }
+  };
+
+  var update = easing.isStepper ? stepperUpdate : timingUpdate;
+
   // return start animation method
   return function () {
-    (0, _raf2.default)(_update2);
+    (0, _raf2.default)(update);
 
@@ -152,0 +151,0 @@ // return stop animation method

es6/util.js

@@ -12,3 +12,3 @@ 'use strict';
 });
-exports.translateStyle = exports.mapObject = exports.judgeNeedTranslated = exports.debugf = exports.debug = exports.log = exports.generatePrefixStyle = exports.getDashCase = exports.getIntersectionKeys = undefined;
+exports.compose = exports.translateStyle = exports.mapObject = exports.judgeNeedTranslated = exports.debugf = exports.debug = exports.log = exports.generatePrefixStyle = exports.getDashCase = exports.getIntersectionKeys = undefined;
 
@@ -122,2 +122,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   }, style);
+};
+
+var compose = exports.compose = function compose() {
+  for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+
+  if (!args.length) {
+    return identity;
+  }
+
+  var fns = args.reverse();
+  // first function can receive multiply arguments
+  var firstFn = fns[0];
+  var tailsFn = fns.slice(1);
+
+  return function () {
+    return tailsFn.reduce(function (res, fn) {
+      return fn(res);
+    }, firstFn.apply(undefined, arguments));
+  };
 };

lib/Animate.js

@@ -55,4 +55,2 @@ 'use strict';
 
-var MIN_TIME = 50;
-
 var Animate = (0, _pureRenderDecorator2.default)(_class = (_temp = _class2 = function (_Component) {
@@ -184,5 +182,7 @@ _inherits(Animate, _Component);
       var steps = props.steps;
+      var begin = props.begin;
       var _steps$ = steps[0];
       var initialStyle = _steps$.style;
-      var initialTime = _steps$.moment;
+      var _steps$$duration = _steps$.duration;
+      var initialTime = _steps$$duration === undefined ? 0 : _steps$$duration;
 
@@ -194,3 +194,3 @@ var addStyle = function addStyle(sequence, nextItem, index) {
 
-        var moment = nextItem.moment;
+        var duration = nextItem.duration;
         var _nextItem$easing = nextItem.easing;
@@ -204,3 +204,2 @@ var easing = _nextItem$easing === undefined ? 'ease' : _nextItem$easing;
         var properties = nextProperties || (0, _util.getIntersectionKeys)(preItem.style, style).map(_util.getDashCase);
-        var duration = moment - preItem.moment;
 
@@ -233,3 +232,3 @@ if (typeof easing === 'function') {
 
-      return this.manager.start([].concat(_toConsumableArray(steps.reduce(addStyle, [initialStyle, Math.max(initialTime, MIN_TIME)])), [props.onAnimationEnd]));
+      return this.manager.start([].concat(_toConsumableArray(steps.reduce(addStyle, [initialStyle, Math.max(initialTime, begin)])), [props.onAnimationEnd]));
     }
@@ -272,3 +271,3 @@ }, {
 
-      manager.start([from, Math.max(begin, MIN_TIME), _extends({}, to, { transition: transition }), duration, onAnimationEnd]);
+      manager.start([from, begin, _extends({}, to, { transition: transition }), duration, onAnimationEnd]);
     }
@@ -348,3 +347,3 @@ }, {
   steps: _react.PropTypes.arrayOf(_react.PropTypes.shape({
-    moment: _react.PropTypes.number.isRequired,
+    duration: _react.PropTypes.number.isRequired,
     style: _react.PropTypes.object.isRequired,
@@ -351,0 +350,0 @@ easing: _react.PropTypes.oneOfType([_react.PropTypes.oneOf(['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear']), _react.PropTypes.func]),

lib/AnimateManager.js

 'use strict';
 
-var _compose = require('lodash/fp/compose');
-
-var _compose2 = _interopRequireDefault(_compose);
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -15,2 +11,6 @@
 
+var _raf = require('raf');
+
+var _raf2 = _interopRequireDefault(_raf);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -67,3 +67,3 @@
       });
-      _setStyle = _compose2.default.apply(undefined, _toConsumableArray(chain))(manager.setStyle);
+      _setStyle = _util.compose.apply(undefined, _toConsumableArray(chain))(manager.setStyle);
 
@@ -110,6 +110,12 @@ return _extends({}, manager, {
         timeout = setTimeout(function () {
-          var res = callback(style);
-          resolve();
+          // set style in next frame to avoid batch set style
+          var res = null;
 
-          return res;
+          (0, _raf2.default)(function () {
+            (0, _raf2.default)(function () {
+              res = callback(style);
+              resolve();
+              return res;
+            });
+          });
         }, delay);
@@ -162,4 +168,4 @@ });
  */
-var finalCreateAniamteManager = (0, _compose2.default)(applyMiddleware(setStyleAsync, sequenceMiddleware, thunkMiddeware))(createAnimateManager);
+var finalCreateAniamteManager = (0, _util.compose)(applyMiddleware(setStyleAsync, sequenceMiddleware, thunkMiddeware))(createAnimateManager);
 
 exports.default = finalCreateAniamteManager;

lib/configUpdate.js

@@ -84,2 +84,3 @@ 'use strict';
   }, {});
+
   var stepperStyle = interKeys.reduce(function (res, key) {
@@ -93,59 +94,57 @@ return _extends({}, res, _defineProperty({}, key, {
   var cafId = -1;
-  var _update2 = function update() {};
   var preTime = undefined;
   var beginTime = undefined;
 
+  var getCurrStyle = function getCurrStyle() {
+    return (0, _util.mapObject)(function (key, val) {
+      return val.from;
+    }, stepperStyle);
+  };
+  var shouldStopAnimation = function shouldStopAnimation() {
+    return !(0, _filter2.default)(stepperStyle, needContinue).length;
+  };
+
   // stepper timing function like spring
-  if (easing.isStepper) {
-    (function () {
-      var getCurrStyle = function getCurrStyle() {
-        return (0, _util.mapObject)(function (key, val) {
-          return val.from;
-        }, stepperStyle);
-      };
-      var shouldStopAnimation = function shouldStopAnimation() {
-        return !(0, _filter2.default)(stepperStyle, needContinue).length;
-      };
+  var stepperUpdate = function stepperUpdate(now) {
+    if (!preTime) {
+      preTime = now;
+    }
+    var deltaTime = now - preTime;
+    var steps = deltaTime / easing.dt;
 
-      _update2 = function update(now) {
-        if (!preTime) {
-          preTime = now;
-        }
-        var deltaTime = now - preTime;
-        var steps = deltaTime / easing.dt;
+    stepperStyle = calStepperVals(easing, stepperStyle, steps);
+    // get union set and add compatible prefix
+    render((0, _util.translateStyle)(_extends({}, from, to, getCurrStyle(stepperStyle))));
 
-        stepperStyle = calStepperVals(easing, stepperStyle, steps);
-        // get union set and add compatible prefix
-        render((0, _util.translateStyle)(_extends({}, from, to, getCurrStyle(stepperStyle))));
+    preTime = now;
 
-        preTime = now;
+    if (!shouldStopAnimation()) {
+      cafId = (0, _raf2.default)(update);
+    }
+  };
 
-        if (!shouldStopAnimation()) {
-          cafId = (0, _raf2.default)(_update2);
-        }
-      };
-    })();
-  } else {
-    // t => val timing function like cubic-bezier
-    _update2 = function _update(now) {
-      if (!beginTime) {
-        beginTime = now;
-      }
+  // t => val timing function like cubic-bezier
+  var timingUpdate = function timingUpdate(now) {
+    if (!beginTime) {
+      beginTime = now;
+    }
 
-      var t = (now - beginTime) / duration;
-      var currStyle = (0, _util.mapObject)(function (key, val) {
-        return alpha.apply(undefined, _toConsumableArray(val).concat([easing(t)]));
-      }, timingStyle);
-      // get union set and add compatible prefix
-      render((0, _util.translateStyle)(_extends({}, from, to, currStyle)));
+    var t = (now - beginTime) / duration;
+    var currStyle = (0, _util.mapObject)(function (key, val) {
+      return alpha.apply(undefined, _toConsumableArray(val).concat([easing(t)]));
+    }, timingStyle);
 
-      if (t < 1) {
-        cafId = (0, _raf2.default)(_update2);
-      }
-    };
-  }
+    // get union set and add compatible prefix
+    render((0, _util.translateStyle)(_extends({}, from, to, currStyle)));
 
+    if (t < 1) {
+      cafId = (0, _raf2.default)(update);
+    }
+  };
+
+  var update = easing.isStepper ? stepperUpdate : timingUpdate;
+
   // return start animation method
   return function () {
-    (0, _raf2.default)(_update2);
+    (0, _raf2.default)(update);
 
@@ -152,0 +151,0 @@ // return stop animation method

lib/util.js

@@ -12,3 +12,3 @@ 'use strict';
 });
-exports.translateStyle = exports.mapObject = exports.judgeNeedTranslated = exports.debugf = exports.debug = exports.log = exports.generatePrefixStyle = exports.getDashCase = exports.getIntersectionKeys = undefined;
+exports.compose = exports.translateStyle = exports.mapObject = exports.judgeNeedTranslated = exports.debugf = exports.debug = exports.log = exports.generatePrefixStyle = exports.getDashCase = exports.getIntersectionKeys = undefined;
 
@@ -122,2 +122,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   }, style);
+};
+
+var compose = exports.compose = function compose() {
+  for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+
+  if (!args.length) {
+    return identity;
+  }
+
+  var fns = args.reverse();
+  // first function can receive multiply arguments
+  var firstFn = fns[0];
+  var tailsFn = fns.slice(1);
+
+  return function () {
+    return tailsFn.reduce(function (res, fn) {
+      return fn(res);
+    }, firstFn.apply(undefined, arguments));
+  };
 };

package.json

 {
   "name": "react-smooth",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "react animation library",
@@ -27,3 +27,3 @@ "main": "lib/index",
     "build-min": "NODE_ENV=production webpack -p src/index.js umd/ReactSmooth.min.js",
-    "test": "./node_modules/karma/bin/ start",
+    "test": "./node_modules/.bin/karma start --single-run",
     "demo": "webpack-dev-server  --progress --port 3000  --colors --content-base demo --hot --inline --config demo/webpack.config.js",
@@ -66,2 +66,3 @@ "lint": "eslint src"
     "chai": "^3.4.1",
+    "chai-spies": "^0.7.1",
     "eslint": "^1.10.3",
@@ -68,0 +69,0 @@ "eslint-config-airbnb": "^3.1.0",

README.md

@@ -7,2 +7,4 @@ # react-smooth
 [![build status](https://travis-ci.org/recharts/react-smooth.svg)](https://travis-ci.org/recharts/react-smooth)
+[![npm downloads](https://img.shields.io/npm/dt/react-smooth.svg?style=flat-square)](https://www.npmjs.com/package/react-smooth)
+[![Gitter](https://badges.gitter.im/recharts/react-smooth.svg)](https://gitter.im/recharts/react-smooth?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 
@@ -29,3 +31,3 @@ ## install
   },
-  moment: 400,
+  duration: 400,
 }, {
@@ -36,3 +38,3 @@ style: {
   },
-  moment: 1000,
+  duration: 1000,
 }, {
@@ -42,3 +44,3 @@ style: {
   },
-  moment: 1200,
+  duration: 1200,
 }];
@@ -81,3 +83,2 @@
   steps: [{
-    moment: 0,
     style: {
@@ -87,3 +88,3 @@ transform: 'translateX(0)',
   }, {
-    moment: 1000,
+    duration: 1000,
     style: {
@@ -94,3 +95,3 @@ transform: 'translateX(300)',
   }, {
-    moment: 2000,
+    duration: 2000,
     style: {
@@ -105,2 +106,20 @@ height: 0,
 </AnimateGroup>
+
+/*
+ *  @description: add compatible prefix in style
+ *
+ *  style = { transform: xxx, ...others };
+ *
+ *  translatedStyle = {
+ *    WebkitTransform: xxx,
+ *    MozTransform: xxx,
+ *    OTransform: xxx,
+ *    msTransform: xxx,
+ *    ...others,
+ *  };
+ */
+
+const translatedStyle = translateStyle(style);
+
+
 ```
@@ -161,3 +180,3 @@
           <td>function</td>
-          <td>() => {}</td>
+          <td>() => null</td>
           <td>called when animation finished</td>
@@ -164,0 +183,0 @@ </tr>

src/Animate.js

@@ -9,4 +9,2 @@ import React, { Component, PropTypes, cloneElement, Children } from 'react';
 
-const MIN_TIME = 50;
-
 @pureRender
@@ -25,3 +23,3 @@ class Animate extends Component {
     steps: PropTypes.arrayOf(PropTypes.shape({
-      moment: PropTypes.number.isRequired,
+      duration: PropTypes.number.isRequired,
       style: PropTypes.object.isRequired,
@@ -153,4 +151,4 @@ easing: PropTypes.oneOfType([
   runStepAnimation(props) {
-    const { steps } = props;
-    const { style: initialStyle, moment: initialTime } = steps[0];
+    const { steps, begin } = props;
+    const { style: initialStyle, duration: initialTime = 0 } = steps[0];
 
@@ -163,3 +161,3 @@ const addStyle = (sequence, nextItem, index) => {
       const {
-        moment,
+        duration,
         easing = 'ease',
@@ -174,3 +172,2 @@ style,
         getIntersectionKeys(preItem.style, style).map(getDashCase);
-      const duration = moment - preItem.moment;
 
@@ -207,3 +204,3 @@ if (typeof easing === 'function') {
       [
-        ...steps.reduce(addStyle, [initialStyle, Math.max(initialTime, MIN_TIME)]),
+        ...steps.reduce(addStyle, [initialStyle, Math.max(initialTime, begin)]),
         props.onAnimationEnd,
@@ -250,3 +247,3 @@ ]
 
-    manager.start([from, Math.max(begin, MIN_TIME), { ...to, transition }, duration, onAnimationEnd]);
+    manager.start([from, begin, { ...to, transition }, duration, onAnimationEnd]);
   }
@@ -253,0 +250,0 @@

src/AnimateManager.js

@@ -1,3 +0,3 @@
-import { translateStyle } from './util';
-import { compose } from 'lodash';
+import { translateStyle, compose } from './util';
+import raf from 'raf';
 
@@ -78,6 +78,12 @@ const createAnimateManager = initialStyle => {
       timeout = setTimeout(() => {
-        const res = callback(style);
-        resolve();
+        // set style in next frame to avoid batch set style
+        let res = null;
 
-        return res;
+        raf(() => {
+          raf(() => {
+            res = callback(style);
+            resolve();
+            return res;
+          });
+        });
       }, delay);
@@ -84,0 +90,0 @@ });

src/configUpdate.js

@@ -61,2 +61,3 @@ import raf, { cancel as caf } from 'raf';
   }, {});
+
   let stepperStyle = interKeys.reduce((res, key) => {
@@ -73,59 +74,59 @@ return {
   let cafId = -1;
-  let update = () => {};
   let preTime;
   let beginTime;
 
+  const getCurrStyle = () => {
+    return mapObject((key, val) => val.from, stepperStyle);
+  };
+  const shouldStopAnimation = () => {
+    return !filter(stepperStyle, needContinue).length;
+  };
+
   // stepper timing function like spring
-  if (easing.isStepper) {
-    const getCurrStyle = () => {
-      return mapObject((key, val) => val.from, stepperStyle);
-    };
-    const shouldStopAnimation = () => {
-      return !filter(stepperStyle, needContinue).length;
-    };
+  const stepperUpdate = (now) => {
+    if (!preTime) {
+      preTime = now;
+    }
+    const deltaTime = now - preTime;
+    const steps = deltaTime / easing.dt;
 
-    update = (now) => {
-      if (!preTime) {
-        preTime = now;
-      }
-      const deltaTime = now - preTime;
-      const steps = deltaTime / easing.dt;
+    stepperStyle = calStepperVals(easing, stepperStyle, steps);
+    // get union set and add compatible prefix
+    render(translateStyle({
+      ...from,
+      ...to,
+      ...getCurrStyle(stepperStyle),
+    }));
 
-      stepperStyle = calStepperVals(easing, stepperStyle, steps);
-      // get union set and add compatible prefix
-      render(translateStyle({
-        ...from,
-        ...to,
-        ...getCurrStyle(stepperStyle),
-      }));
+    preTime = now;
 
-      preTime = now;
+    if (!shouldStopAnimation()) {
+      cafId = raf(update);
+    }
+  };
 
-      if (!shouldStopAnimation()) {
-        cafId = raf(update);
-      }
-    };
-  } else {
-    // t => val timing function like cubic-bezier
-    update = (now) => {
-      if (!beginTime) {
-        beginTime = now;
-      }
+  // t => val timing function like cubic-bezier
+  const timingUpdate = (now) => {
+    if (!beginTime) {
+      beginTime = now;
+    }
 
-      const t = (now - beginTime) / duration;
-      const currStyle = mapObject((key, val) =>
-        alpha(...val, easing(t)), timingStyle);
-      // get union set and add compatible prefix
-      render(translateStyle({
-        ...from,
-        ...to,
-        ...currStyle,
-      }));
+    const t = (now - beginTime) / duration;
+    const currStyle = mapObject((key, val) =>
+      alpha(...val, easing(t)), timingStyle);
 
-      if (t < 1) {
-        cafId = raf(update);
-      }
-    };
-  }
+    // get union set and add compatible prefix
+    render(translateStyle({
+      ...from,
+      ...to,
+      ...currStyle,
+    }));
 
+    if (t < 1) {
+      cafId = raf(update);
+    }
+  };
+
+  const update = easing.isStepper ? stepperUpdate : timingUpdate;
+
   // return start animation method
@@ -132,0 +133,0 @@ return () => {

src/util.js

@@ -98,1 +98,19 @@ import { intersection } from 'lodash';
 };
+
+export const compose = (...args) => {
+  if (!args.length) {
+    return identity;
+  }
+
+  const fns = args.reverse();
+  // first function can receive multiply arguments
+  const firstFn = fns[0];
+  const tailsFn = fns.slice(1);
+
+  return (...composeArgs) =>
+    tailsFn.reduce((res, fn) =>
+      fn(res),
+      firstFn(...composeArgs)
+  );
+};
+

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

240

increased by8.6%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

251496

decreased by-26.09%

Dev dependency count

29

increased by3.57%

Number of package files

37

decreased by-2.63%

Lines of code

6801

decreased by-18.87%

No dependency changes