rc-scroll-anim - npm Package Compare versions

Comparing version 1.0.7 to 2.0.0

HISTORY.md

@@ -0,1 +1,8 @@
+## 2.0.0
+1. 升级 react 到 16;
+2. 去除 onAsynchronousAddEvent， 可查看异步 [demo](http://react-component.github.io/scroll-anim/examples/linkAsynchronous.html);
+3. 增加用例使用。
+4. 增加全部组件的 `targetId`, 可定位到指定的 dom 进行滚动。
+5. 去除 parallax 的延时渲染。
+
 ## 0.5.0
@@ -2,0 +9,0 @@

lib/EventDispatcher.js

@@ -134,3 +134,3 @@ 'use strict';
 }
-exports["default"] = event;
+exports['default'] = event;
 module.exports = exports['default'];

lib/index.js

@@ -31,13 +31,13 @@ 'use strict';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 // export this package's api
-exports["default"] = {
-  OverPack: _ScrollOverPack2["default"],
-  Parallax: _ScrollParallax2["default"],
-  Element: _ScrollElement2["default"],
-  Link: _ScrollLink2["default"],
-  Event: _EventDispatcher2["default"],
-  scrollScreen: _ScrollScreen2["default"]
+exports['default'] = {
+  OverPack: _ScrollOverPack2['default'],
+  Parallax: _ScrollParallax2['default'],
+  Element: _ScrollElement2['default'],
+  Link: _ScrollLink2['default'],
+  Event: _EventDispatcher2['default'],
+  scrollScreen: _ScrollScreen2['default']
 };
 module.exports = exports['default'];

lib/ScrollElement.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
 var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
@@ -50,3 +54,3 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
@@ -56,8 +60,10 @@ var noop = function noop() {};
 var ScrollElement = function (_React$Component) {
-  (0, _inherits3["default"])(ScrollElement, _React$Component);
+  (0, _inherits3['default'])(ScrollElement, _React$Component);
 
   function ScrollElement() {
+    var _ref;
+
     var _temp, _this, _ret;
 
-    (0, _classCallCheck3["default"])(this, ScrollElement);
+    (0, _classCallCheck3['default'])(this, ScrollElement);
 
@@ -68,3 +74,3 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.getParam = function (e) {
+    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref = ScrollElement.__proto__ || Object.getPrototypeOf(ScrollElement)).call.apply(_ref, [this].concat(args))), _this), _this.getParam = function (e) {
       _this.clientHeight = _this.target ? _this.target.clientHeight : (0, _util.windowHeight)();
@@ -103,56 +109,61 @@ var scrollTop = _this.target ? _this.target.scrollTop : (0, _util.currentScrollTop)();
       _this.getParam(e);
-    }, _temp), (0, _possibleConstructorReturn3["default"])(_this, _ret);
+    }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret);
   }
 
-  ScrollElement.prototype.componentDidMount = function componentDidMount() {
-    this.dom = _reactDom2["default"].findDOMNode(this);
-    if (this.props.location) {
-      this.dom = document.getElementById(this.props.location);
-      _Mapped2["default"].register(this.props.location, this.dom);
-    } else if (this.props.id) {
-      _Mapped2["default"].register(this.props.id, this.dom);
-    }
-    var date = Date.now();
-    this.target = this.props.targetId && document.getElementById(this.props.targetId);
+  (0, _createClass3['default'])(ScrollElement, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.dom = _reactDom2['default'].findDOMNode(this);
+      if (this.props.location) {
+        this.dom = document.getElementById(this.props.location);
+        _Mapped2['default'].register(this.props.location, this.dom);
+      } else if (this.props.id) {
+        _Mapped2['default'].register(this.props.id, this.dom);
+      }
+      var date = Date.now();
+      this.target = this.props.targetId && document.getElementById(this.props.targetId);
 
-    var length = _EventDispatcher2["default"]._listeners.scroll ? _EventDispatcher2["default"]._listeners.scroll.length : 0;
-    this.eventType = 'scroll.scrollEvent' + date + length;
-    _EventDispatcher2["default"].addEventListener(this.eventType, this.scrollEventListener, this.target);
+      var length = _EventDispatcher2['default']._listeners.scroll ? _EventDispatcher2['default']._listeners.scroll.length : 0;
+      this.eventType = 'scroll.scrollEvent' + date + length;
+      _EventDispatcher2['default'].addEventListener(this.eventType, this.scrollEventListener, this.target);
 
-    var scrollTop = (0, _util.currentScrollTop)();
-    if (!scrollTop) {
-      this.scrollEventListener();
+      var scrollTop = (0, _util.currentScrollTop)();
+      if (!scrollTop) {
+        this.scrollEventListener();
+      }
     }
-  };
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      this.setState({
+        children: (0, _util.toArrayChildren)(nextProps.children)
+      });
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      _Mapped2['default'].unRegister(this.props.id);
+      _EventDispatcher2['default'].removeEventListener(this.eventType, this.scrollEventListener, this.target);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var props = (0, _objectWithoutProperties3['default'])(this.props, []);
 
-  ScrollElement.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    this.setState({
-      children: (0, _util.toArrayChildren)(nextProps.children)
-    });
-  };
-
-  ScrollElement.prototype.componentWillUnmount = function componentWillUnmount() {
-    _Mapped2["default"].unRegister(this.props.id);
-    _EventDispatcher2["default"].removeEventListener(this.eventType, this.scrollEventListener, this.target);
-  };
-
-  ScrollElement.prototype.render = function render() {
-    var props = (0, _objectWithoutProperties3["default"])(this.props, []);
-
-    ['component', 'playScale', 'location', 'targetId'].forEach(function (key) {
-      return delete props[key];
-    });
-    return _react2["default"].createElement(this.props.component, (0, _extends3["default"])({}, props));
-  };
-
+      ['component', 'playScale', 'location', 'targetId'].forEach(function (key) {
+        return delete props[key];
+      });
+      return _react2['default'].createElement(this.props.component, (0, _extends3['default'])({}, props));
+    }
+  }]);
   return ScrollElement;
-}(_react2["default"].Component);
+}(_react2['default'].Component);
 
 ScrollElement.propTypes = {
-  component: _propTypes2["default"].oneOfType([_propTypes2["default"].func, _propTypes2["default"].string]),
-  playScale: _propTypes2["default"].any,
-  id: _propTypes2["default"].string,
-  onChange: _propTypes2["default"].func,
-  location: _propTypes2["default"].string,
-  targetId: _propTypes2["default"].string
+  component: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].string]),
+  playScale: _propTypes2['default'].any,
+  id: _propTypes2['default'].string,
+  onChange: _propTypes2['default'].func,
+  location: _propTypes2['default'].string,
+  targetId: _propTypes2['default'].string
 };
@@ -166,3 +177,3 @@
 ScrollElement.isScrollElement = true;
-exports["default"] = ScrollElement;
+exports['default'] = ScrollElement;
 module.exports = exports['default'];

lib/ScrollLink.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
 var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
@@ -50,3 +54,3 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
@@ -61,19 +65,22 @@ function noop() {} /**
 var ScrollLink = function (_React$Component) {
-  (0, _inherits3["default"])(ScrollLink, _React$Component);
+  (0, _inherits3['default'])(ScrollLink, _React$Component);
 
   function ScrollLink() {
-    (0, _classCallCheck3["default"])(this, ScrollLink);
+    (0, _classCallCheck3['default'])(this, ScrollLink);
 
-    var _this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.apply(this, arguments));
+    var _this = (0, _possibleConstructorReturn3['default'])(this, (ScrollLink.__proto__ || Object.getPrototypeOf(ScrollLink)).apply(this, arguments));
 
     _this.onClick = function (e) {
       e.preventDefault();
-      if (_this.rafID !== -1) {
+      _EventDispatcher2['default'].removeAllType('scroll.scrollAnchorEvent');
+
+      var _this$getElement = _this.getElement(),
+          elementDom = _this$getElement.elementDom,
+          elementRect = _this$getElement.elementRect;
+
+      if (_this.rafID !== -1 || !elementDom) {
         return;
       }
-      var docRect = document.documentElement.getBoundingClientRect();
-      var elementDom = document.getElementById(_this.props.to);
-      var elementRect = elementDom.getBoundingClientRect();
-      _this.scrollTop = (0, _util.currentScrollTop)();
-      var toTop = Math.round(elementRect.top) - Math.round(docRect.top) - _this.props.offsetTop;
+      _this.scrollTop = _this.target ? _this.target.scrollTop : (0, _util.currentScrollTop)();
+      var toTop = Math.round(elementRect.top + _this.scrollTop) - _this.props.offsetTop;
       var t = (0, _util.transformArguments)(_this.props.showHeightActive)[0];
@@ -83,4 +90,3 @@ var toShow = t.match('%') ? _this.clientHeight * parseFloat(t) / 100 : t;
       _this.initTime = Date.now();
-      _this.rafID = (0, _raf2["default"])(_this.raf);
-      _EventDispatcher2["default"].removeAllType('scroll.scrollAnchorEvent');
+      _this.rafID = (0, _raf2['default'])(_this.raf);
       scrollLinkLists.forEach(function (item) {
@@ -94,32 +100,11 @@ if (item !== _this) {
 
-    _this.addScrollEventListener = function () {
-      var date = Date.now();
-      var length = _EventDispatcher2["default"]._listeners.scroll ? _EventDispatcher2["default"]._listeners.scroll.length : 0;
-      _this.eventType = 'scroll.scrollAnchorEvent' + date + length;
-      _EventDispatcher2["default"].addEventListener(_this.eventType, _this.scrollEventListener);
-      // 第一次进入；等全部渲染完成后执行;
-      setTimeout(function () {
-        _this.scrollEventListener();
-      });
+    _this.getElement = function () {
+      _this.clientHeight = _this.target ? _this.target.clientHeight : (0, _util.windowHeight)();
+      var elementDom = document.getElementById(_this.props.to);
+      var elementRect = elementDom.getBoundingClientRect();
+      return { elementDom: elementDom, elementRect: elementRect };
     };
 
-    _this.raf = function () {
-      if (_this.rafID === -1) {
-        return;
-      }
-      var duration = _this.props.duration;
-      var now = Date.now();
-      var progressTime = now - _this.initTime > duration ? duration : now - _this.initTime;
-      var easeValue = _tweenFunctions2["default"][_this.props.ease](progressTime, _this.scrollTop, _this.toTop, duration);
-      window.scrollTo(window.scrollX, easeValue);
-      if (progressTime === duration) {
-        _this.cancelRequestAnimationFrame();
-        _EventDispatcher2["default"].reAllType('scroll.scrollAnchorEvent');
-      } else {
-        _this.rafID = (0, _raf2["default"])(_this.raf);
-      }
-    };
-
     _this.cancelRequestAnimationFrame = function () {
-      _raf2["default"].cancel(_this.rafID);
+      _raf2['default'].cancel(_this.rafID);
       _this.rafID = -1;
@@ -146,2 +131,23 @@ };
 
+    _this.raf = function () {
+      if (_this.rafID === -1) {
+        return;
+      }
+      var duration = _this.props.duration;
+      var now = Date.now();
+      var progressTime = now - _this.initTime > duration ? duration : now - _this.initTime;
+      var easeValue = _tweenFunctions2['default'][_this.props.ease](progressTime, _this.scrollTop, _this.toTop, duration);
+      if (_this.target) {
+        _this.target.scrollTop = easeValue;
+      } else {
+        window.scrollTo(window.scrollX, easeValue);
+      }
+      if (progressTime === duration) {
+        _this.cancelRequestAnimationFrame();
+        _EventDispatcher2['default'].reAllType('scroll.scrollAnchorEvent');
+      } else {
+        _this.rafID = (0, _raf2['default'])(_this.raf);
+      }
+    };
+
     _this.remActive = function () {
@@ -161,16 +167,15 @@ if (_this.state.active) {
     _this.scrollEventListener = function () {
-      var docRect = document.documentElement.getBoundingClientRect();
-      _this.clientHeight = (0, _util.windowHeight)();
-      var elementDom = document.getElementById(_this.props.to);
+      var _this$getElement2 = _this.getElement(),
+          elementDom = _this$getElement2.elementDom,
+          elementRect = _this$getElement2.elementRect;
+
       if (!elementDom) {
-        throw new Error('There is no to(' + _this.props.to + ') in the element.');
+        return;
       }
-      var elementRect = elementDom.getBoundingClientRect();
       var elementClientHeight = elementDom.clientHeight;
-      var scrollTop = (0, _util.currentScrollTop)();
-      var top = Math.round(docRect.top - elementRect.top + scrollTop);
+      var top = Math.round(-elementRect.top);
       var showHeightActive = (0, _util.transformArguments)(_this.props.showHeightActive);
       var startShowHeight = showHeightActive[0].toString().indexOf('%') >= 0 ? parseFloat(showHeightActive[0]) / 100 * _this.clientHeight : parseFloat(showHeightActive[0]);
       var endShowHeight = showHeightActive[1].toString().indexOf('%') >= 0 ? parseFloat(showHeightActive[1]) / 100 * _this.clientHeight : parseFloat(showHeightActive[1]);
-      if (top >= -startShowHeight && top < elementClientHeight - endShowHeight) {
+      if (top >= Math.round(-startShowHeight) && top < Math.round(elementClientHeight - endShowHeight)) {
         _this.addActive();
@@ -186,69 +191,75 @@ } else {
     };
-    if (_this.props.location) {
-      throw new Error('ScrollLink "location" was abandoned, please use "to"');
-    }
     return _this;
   }
 
-  ScrollLink.prototype.componentDidMount = function componentDidMount() {
-    this.dom = _reactDom2["default"].findDOMNode(this);
-    scrollLinkLists.push(this);
-    if (this.props.onAsynchronousAddEvent) {
-      this.props.onAsynchronousAddEvent(this.addScrollEventListener);
-    } else {
-      this.addScrollEventListener();
+  (0, _createClass3['default'])(ScrollLink, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      this.dom = _reactDom2['default'].findDOMNode(this);
+      this.target = this.props.targetId && document.getElementById(this.props.targetId);
+      scrollLinkLists.push(this);
+      var date = Date.now();
+      var length = _EventDispatcher2['default']._listeners.scroll ? _EventDispatcher2['default']._listeners.scroll.length : 0;
+      this.eventType = 'scroll.scrollAnchorEvent' + date + length;
+      _EventDispatcher2['default'].addEventListener(this.eventType, this.scrollEventListener, this.target);
+      // 第一次进入；等全部渲染完成后执行;
+      setTimeout(function () {
+        _this2.scrollEventListener();
+      });
     }
-  };
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      var _this3 = this;
 
-  ScrollLink.prototype.componentWillUnmount = function componentWillUnmount() {
-    var _this2 = this;
+      scrollLinkLists = scrollLinkLists.filter(function (item) {
+        return item !== _this3;
+      });
+      _EventDispatcher2['default'].removeEventListener(this.eventType, this.scrollEventListener, this.target);
+      this.cancelRequestAnimationFrame();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this4 = this;
 
-    scrollLinkLists = scrollLinkLists.filter(function (item) {
-      return item !== _this2;
-    });
-    _EventDispatcher2["default"].removeEventListener(this.eventType, this.scrollEventListener);
-    this.cancelRequestAnimationFrame();
-  };
-
-  ScrollLink.prototype.render = function render() {
-    var _this3 = this;
-
-    var active = this.state.active ? this.props.active : '';
-    var _onClick = this.props.onClick;
-    var props = (0, _extends3["default"])({}, this.props, {
-      onClick: function onClick(e) {
-        _onClick(e);
-        _this3.onClick(e);
-      }
-    });
-    ['component', 'duration', 'active', 'location', 'showHeightActive', 'ease', 'toShowHeight', 'offsetTop', 'to', 'onAsynchronousAddEvent', 'toHash'].forEach(function (key) {
-      return delete props[key];
-    });
-    var reg = new RegExp(active, 'ig');
-    var className = props.className || '';
-    props.className = className.indexOf(active) === -1 ? (className + ' ' + active).trim() : className.replace(reg, '').trim();
-    return (0, _react.createElement)(this.props.component, props);
-  };
-
+      var active = this.state.active ? this.props.active : '';
+      var _onClick = this.props.onClick;
+      var props = (0, _extends3['default'])({}, this.props, {
+        onClick: function onClick(e) {
+          _onClick(e);
+          _this4.onClick(e);
+        }
+      });
+      ['component', 'duration', 'active', 'showHeightActive', 'ease', 'toShowHeight', 'offsetTop', 'targetId', 'to', 'toHash'].forEach(function (key) {
+        return delete props[key];
+      });
+      var reg = new RegExp(active, 'ig');
+      var className = props.className || '';
+      props.className = className.indexOf(active) === -1 ? (className + ' ' + active).trim() : className.replace(reg, '').trim();
+      return (0, _react.createElement)(this.props.component, props);
+    }
+  }]);
   return ScrollLink;
-}(_react2["default"].Component);
+}(_react2['default'].Component);
 
 ScrollLink.propTypes = {
-  component: _propTypes2["default"].oneOfType([_propTypes2["default"].func, _propTypes2["default"].string]),
-  children: _propTypes2["default"].any,
-  className: _propTypes2["default"].string,
-  style: _propTypes2["default"].any,
-  offsetTop: _propTypes2["default"].number,
-  duration: _propTypes2["default"].number,
-  active: _propTypes2["default"].string,
-  location: _propTypes2["default"].string,
-  to: _propTypes2["default"].string,
-  showHeightActive: _propTypes2["default"].any,
-  toShowHeight: _propTypes2["default"].bool,
-  ease: _propTypes2["default"].string,
-  onClick: _propTypes2["default"].func,
-  onFocus: _propTypes2["default"].func,
-  onBlur: _propTypes2["default"].func,
-  onAsynchronousAddEvent: _propTypes2["default"].func,
-  toHash: _propTypes2["default"].bool
+  component: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].string]),
+  children: _propTypes2['default'].any,
+  className: _propTypes2['default'].string,
+  style: _propTypes2['default'].any,
+  offsetTop: _propTypes2['default'].number,
+  duration: _propTypes2['default'].number,
+  active: _propTypes2['default'].string,
+  to: _propTypes2['default'].string,
+  targetId: _propTypes2['default'].string,
+  showHeightActive: _propTypes2['default'].any,
+  toShowHeight: _propTypes2['default'].bool,
+  ease: _propTypes2['default'].string,
+  onClick: _propTypes2['default'].func,
+  onFocus: _propTypes2['default'].func,
+  onBlur: _propTypes2['default'].func,
+  toHash: _propTypes2['default'].bool
 };
@@ -270,3 +281,3 @@
 
-exports["default"] = ScrollLink;
+exports['default'] = ScrollLink;
 module.exports = exports['default'];

lib/ScrollOverPack.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
 var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
@@ -46,3 +50,3 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
@@ -52,8 +56,8 @@ function noop() {}
 var ScrollOverPack = function (_ScrollElement) {
-  (0, _inherits3["default"])(ScrollOverPack, _ScrollElement);
+  (0, _inherits3['default'])(ScrollOverPack, _ScrollElement);
 
   function ScrollOverPack(props) {
-    (0, _classCallCheck3["default"])(this, ScrollOverPack);
+    (0, _classCallCheck3['default'])(this, ScrollOverPack);
 
-    var _this = (0, _possibleConstructorReturn3["default"])(this, _ScrollElement.call(this, props));
+    var _this = (0, _possibleConstructorReturn3['default'])(this, (ScrollOverPack.__proto__ || Object.getPrototypeOf(ScrollOverPack)).call(this, props));
 
@@ -70,3 +74,3 @@ _this.scrollEventListener = function (e) {
         if (!_this.props.always && _this.eventType) {
-          _EventDispatcher2["default"].removeEventListener(_this.eventType, _this.scrollEventListener, _this.target);
+          _EventDispatcher2['default'].removeEventListener(_this.eventType, _this.scrollEventListener, _this.target);
         }
@@ -97,47 +101,49 @@ } else {
 
-  ScrollOverPack.prototype.render = function render() {
-    var placeholderProps = (0, _objectWithoutProperties3["default"])(this.props, []);
+  (0, _createClass3['default'])(ScrollOverPack, [{
+    key: 'render',
+    value: function render() {
+      var placeholderProps = (0, _objectWithoutProperties3['default'])(this.props, []);
 
-    ['playScale', 'replay', 'component', 'always', 'scrollEvent', 'appear', 'location', 'targetId'].forEach(function (key) {
-      return delete placeholderProps[key];
-    });
-    var childToRender = void 0;
-    if (!this.oneEnter) {
-      var children = !this.props.appear && this.props.children;
-      childToRender = (0, _react.createElement)(this.props.component, (0, _extends3["default"])({}, placeholderProps), children);
-      this.oneEnter = true;
-    } else {
-      if (!this.state.show) {
-        this.children = this.children.map(function (item) {
-          if (!item) {
-            return null;
-          }
-          // 判断 TweenOne;
-          if (item.type.TweenOneGroup && item.type.easing && item.type.plugins) {
-            return _react2["default"].cloneElement(item, { reverse: true });
-          }
-          return _react2["default"].cloneElement(item, {}, null);
-        });
+      ['playScale', 'replay', 'component', 'always', 'scrollEvent', 'appear', 'location', 'targetId'].forEach(function (key) {
+        return delete placeholderProps[key];
+      });
+      var childToRender = void 0;
+      if (!this.oneEnter) {
+        var children = !this.props.appear && this.props.children;
+        childToRender = (0, _react.createElement)(this.props.component, (0, _extends3['default'])({}, placeholderProps), children);
+        this.oneEnter = true;
       } else {
-        this.children = this.state.children;
+        if (!this.state.show) {
+          this.children = this.children.map(function (item) {
+            if (!item) {
+              return null;
+            }
+            // 判断 TweenOne;
+            if (item.type.TweenOneGroup && item.type.easing && item.type.plugins) {
+              return _react2['default'].cloneElement(item, { reverse: true });
+            }
+            return _react2['default'].cloneElement(item, {}, null);
+          });
+        } else {
+          this.children = this.state.children;
+        }
+        childToRender = (0, _react.createElement)(this.props.component, (0, _extends3['default'])({}, placeholderProps), this.children);
       }
-      childToRender = (0, _react.createElement)(this.props.component, (0, _extends3["default"])({}, placeholderProps), this.children);
+      return childToRender;
     }
-    return childToRender;
-  };
-
+  }]);
   return ScrollOverPack;
-}(_ScrollElement3["default"]);
+}(_ScrollElement3['default']);
 
 ScrollOverPack.propTypes = {
-  component: _propTypes2["default"].oneOfType([_propTypes2["default"].func, _propTypes2["default"].string]),
-  playScale: _propTypes2["default"].any,
-  always: _propTypes2["default"].bool,
-  scrollEvent: _propTypes2["default"].func,
-  children: _propTypes2["default"].any,
-  className: _propTypes2["default"].string,
-  style: _propTypes2["default"].any,
-  replay: _propTypes2["default"].bool,
-  onChange: _propTypes2["default"].func,
-  appear: _propTypes2["default"].bool
+  component: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].string]),
+  playScale: _propTypes2['default'].any,
+  always: _propTypes2['default'].bool,
+  scrollEvent: _propTypes2['default'].func,
+  children: _propTypes2['default'].any,
+  className: _propTypes2['default'].string,
+  style: _propTypes2['default'].any,
+  replay: _propTypes2['default'].bool,
+  onChange: _propTypes2['default'].func,
+  appear: _propTypes2['default'].bool
 };
@@ -156,3 +162,3 @@
 
-exports["default"] = ScrollOverPack;
+exports['default'] = ScrollOverPack;
 module.exports = exports['default'];

lib/ScrollParallax.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
 var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
@@ -54,3 +58,3 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
@@ -74,8 +78,8 @@ var tickerId = 0;
 var ScrollParallax = function (_React$Component) {
-  (0, _inherits3["default"])(ScrollParallax, _React$Component);
+  (0, _inherits3['default'])(ScrollParallax, _React$Component);
 
   function ScrollParallax(props) {
-    (0, _classCallCheck3["default"])(this, ScrollParallax);
+    (0, _classCallCheck3['default'])(this, ScrollParallax);
 
-    var _this = (0, _possibleConstructorReturn3["default"])(this, _React$Component.call(this, props));
+    var _this = (0, _possibleConstructorReturn3['default'])(this, (ScrollParallax.__proto__ || Object.getPrototypeOf(ScrollParallax)).call(this, props));
 
@@ -88,5 +92,5 @@ _this.setDefaultData = function (_vars) {
         });
-        var aItem = (0, _extends3["default"])({}, item);
+        var aItem = (0, _extends3['default'])({}, item);
         delete aItem.playScale;
-        var cItem = (0, _extends3["default"])({}, item);
+        var cItem = (0, _extends3['default'])({}, item);
         delete cItem.playScale;
@@ -110,4 +114,4 @@ cItem.delay = aItem.delay = playScale[0];
     _this.scrollEventListener = function () {
-      var scrollTop = (0, _util.currentScrollTop)();
-      _this.clientHeight = (0, _util.windowHeight)();
+      var scrollTop = _this.target ? _this.target.scrollTop : (0, _util.currentScrollTop)();
+      _this.clientHeight = _this.target ? _this.target.clientHeight : (0, _util.windowHeight)();
       var dom = _this.props.location ? document.getElementById(_this.props.location) : _this.dom;
@@ -117,3 +121,4 @@ if (!dom) {
       }
-      var offsetTop = dom.getBoundingClientRect().top + scrollTop;
+      var targetTop = _this.target ? _this.target.getBoundingClientRect().top : 0;
+      var offsetTop = dom.getBoundingClientRect().top + scrollTop - targetTop;
       var elementShowHeight = scrollTop - offsetTop + _this.clientHeight;
@@ -157,3 +162,3 @@ var currentShow = _this.scrollTop - offsetTop + _this.clientHeight;
       });
-      _ticker2["default"].clear(_this.tickerId);
+      _ticker2['default'].clear(_this.tickerId);
       _this.tickerId = 'scrollParallax' + Date.now() + '-' + tickerId;
@@ -164,9 +169,9 @@ tickerId++;
       }
-      var startFrame = _ticker2["default"].frame;
-      _ticker2["default"].wake(_this.tickerId, function () {
-        var moment = (_ticker2["default"].frame - startFrame) * _ticker2["default"].perFrame;
-        var ratio = _tweenFunctions2["default"].easeOutQuad(moment, 0.08, 1, 300);
+      var startFrame = _ticker2['default'].frame;
+      _ticker2['default'].wake(_this.tickerId, function () {
+        var moment = (_ticker2['default'].frame - startFrame) * _ticker2['default'].perFrame;
+        var ratio = _tweenFunctions2['default'].easeOutQuad(moment, 0.08, 1, 300);
         _this.timeline.frame(currentShow + ratio * (elementShowHeight - currentShow));
         if (moment >= 300) {
-          _ticker2["default"].clear(_this.tickerId);
+          _ticker2['default'].clear(_this.tickerId);
         }
@@ -177,6 +182,4 @@ });
       // 如果不一直靠滚动来执行动画，always=false而且动画全执行完了，，删除scrollEvent;
-      if (_this.defaultData.every(function (c) {
-        return c.onComplete.only;
-      }) && !_this.props.always) {
-        _EventDispatcher2["default"].removeEventListener(_this.eventType, _this.scrollEventListener);
+      if (_this.onCompleteBool && _this.eventType && !_this.props.always) {
+        _EventDispatcher2['default'].removeEventListener(_this.eventType, _this.scrollEventListener, _this.target);
       }
@@ -188,3 +191,2 @@ };
     _this.defaultData = [];
-    _this.timeout = null;
     _this.state = {};
@@ -194,72 +196,70 @@ return _this;
 
-  ScrollParallax.prototype.componentDidMount = function componentDidMount() {
-    var _this2 = this;
+  (0, _createClass3['default'])(ScrollParallax, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.dom = _reactDom2['default'].findDOMNode(this);
+      this.scrollTop = (0, _util.currentScrollTop)();
+      this.target = this.props.targetId && document.getElementById(this.props.targetId);
+      this.clientHeight = this.target ? this.target.clientHeight : (0, _util.windowHeight)();
+      this.setDefaultData(this.props.animation || {});
 
-    this.dom = _reactDom2["default"].findDOMNode(this);
-    this.scrollTop = (0, _util.currentScrollTop)();
-    this.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-    this.setDefaultData(this.props.animation || {});
-
-    // 第一次进入;
-    this.timeout = setTimeout(function () {
-      _this2.timeline = new _TimeLine2["default"](_this2.dom, _this2.defaultTweenData, {});
+      // 第一次进入;
+      this.timeline = new _TimeLine2['default'](this.dom, this.defaultTweenData, {});
       // 预注册;
-      _this2.timeline.frame(0);
-      _this2.scrollEventListener();
+      this.timeline.frame(0);
       var date = Date.now();
-      var length = _EventDispatcher2["default"]._listeners.scroll ? _EventDispatcher2["default"]._listeners.scroll.length : 0;
-      _this2.eventType = 'scroll.scrollEvent' + date + length;
-      _EventDispatcher2["default"].addEventListener(_this2.eventType, _this2.scrollEventListener);
-    });
-  };
-
-  ScrollParallax.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    var equal = (0, _util.objectEqual)(this.props.animation, nextProps.animation);
-    if (!equal) {
-      this.setDefaultData(nextProps.animation || {});
-      this.timeline.resetAnimData();
-      this.timeline.setDefaultData(this.defaultTweenData);
+      var length = _EventDispatcher2['default']._listeners.scroll ? _EventDispatcher2['default']._listeners.scroll.length : 0;
+      this.eventType = 'scroll.scrollEvent' + date + length;
+      this.scrollEventListener();
+      _EventDispatcher2['default'].addEventListener(this.eventType, this.scrollEventListener, this.target);
     }
-  };
-
-  ScrollParallax.prototype.componentWillUnmount = function componentWillUnmount() {
-    if (!this.eventType && this.timeout) {
-      clearTimeout(this.timeout);
-      this.timeout = null;
-    } else {
-      _EventDispatcher2["default"].removeEventListener(this.eventType, this.scrollEventListener);
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      var equal = (0, _util.objectEqual)(this.props.animation, nextProps.animation);
+      if (!equal) {
+        this.setDefaultData(nextProps.animation || {});
+        this.timeline.resetAnimData();
+        this.timeline.setDefaultData(this.defaultTweenData);
+      }
     }
-  };
-
-  ScrollParallax.prototype.render = function render() {
-    var props = (0, _extends3["default"])({}, this.props);
-    ['animation', 'always', 'component', 'location', 'id'].forEach(function (key) {
-      return delete props[key];
-    });
-    var style = (0, _extends3["default"])({}, props.style);
-    for (var p in style) {
-      if (p.indexOf('filter') >= 0 || p.indexOf('Filter') >= 0) {
-        // ['Webkit', 'Moz', 'Ms', 'ms'].forEach(prefix=> style[`${prefix}Filter`] = style[p]);
-        var transformArr = ['Webkit', 'Moz', 'Ms', 'ms'];
-        for (var i = 0; i < transformArr.length; i++) {
-          style[transformArr[i] + 'Filter'] = style[p];
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      _EventDispatcher2['default'].removeEventListener(this.eventType, this.scrollEventListener, this.target);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var props = (0, _extends3['default'])({}, this.props);
+      ['animation', 'always', 'component', 'location', 'id', 'targetId'].forEach(function (key) {
+        return delete props[key];
+      });
+      var style = (0, _extends3['default'])({}, props.style);
+      for (var p in style) {
+        if (p.indexOf('filter') >= 0 || p.indexOf('Filter') >= 0) {
+          // ['Webkit', 'Moz', 'Ms', 'ms'].forEach(prefix=> style[`${prefix}Filter`] = style[p]);
+          var transformArr = ['Webkit', 'Moz', 'Ms', 'ms'];
+          for (var i = 0; i < transformArr.length; i++) {
+            style[transformArr[i] + 'Filter'] = style[p];
+          }
         }
       }
+      props.style = style;
+      return _react2['default'].createElement(this.props.component, props);
     }
-    props.style = style;
-    return _react2["default"].createElement(this.props.component, props);
-  };
-
+  }]);
   return ScrollParallax;
-}(_react2["default"].Component);
+}(_react2['default'].Component);
 
 ScrollParallax.propTypes = {
-  component: _propTypes2["default"].oneOfType([_propTypes2["default"].func, _propTypes2["default"].string]),
-  animation: _propTypes2["default"].any,
-  always: _propTypes2["default"].bool,
-  location: _propTypes2["default"].string,
-  children: _propTypes2["default"].any,
-  className: _propTypes2["default"].string,
-  style: _propTypes2["default"].any,
-  id: _propTypes2["default"].string
+  component: _propTypes2['default'].oneOfType([_propTypes2['default'].func, _propTypes2['default'].string]),
+  animation: _propTypes2['default'].any,
+  always: _propTypes2['default'].bool,
+  location: _propTypes2['default'].string,
+  children: _propTypes2['default'].any,
+  className: _propTypes2['default'].string,
+  style: _propTypes2['default'].any,
+  id: _propTypes2['default'].string,
+  targetId: _propTypes2['default'].string
 };
@@ -272,3 +272,3 @@
 ScrollParallax.isScrollParallax = true;
-exports["default"] = ScrollParallax;
+exports['default'] = ScrollParallax;
 module.exports = exports['default'];

lib/ScrollScreen.js

@@ -25,3 +25,3 @@ 'use strict';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
@@ -51,3 +51,3 @@ // 设置默认数据
     });
-    _EventDispatcher2["default"].addEventListener('wheel.scrollWheel', this.onWheel);
+    _EventDispatcher2['default'].addEventListener('wheel.scrollWheel', this.onWheel);
     // 刚进入时滚动条位置
@@ -59,6 +59,6 @@ setTimeout(this.startScroll);
 
-    var _mapped = _Mapped2["default"].getMapped();
+    var _mapped = _Mapped2['default'].getMapped();
     var _arr = _mapped.__arr;
     if (!_arr.length) {
-      _EventDispatcher2["default"].removeEventListener('wheel.scrollWheel', this.onWheel);
+      _EventDispatcher2['default'].removeEventListener('wheel.scrollWheel', this.onWheel);
       return;
@@ -79,6 +79,6 @@ }
       if (this.scrollTop > 0) {
-        var endDom = _Mapped2["default"].get(_Mapped2["default"].getMapped().__arr[_Mapped2["default"].getMapped().__arr.length - 1]);
+        var endDom = _Mapped2['default'].get(_Mapped2['default'].getMapped().__arr[_Mapped2['default'].getMapped().__arr.length - 1]);
         var windowHeight = document.documentElement.clientHeight;
         var tooNum = Math.ceil((this.scrollTop - endDom.offsetTop - endDom.getBoundingClientRect().height) / windowHeight);
-        this.num = _Mapped2["default"].getMapped().__arr.length + tooNum;
+        this.num = _Mapped2['default'].getMapped().__arr.length + tooNum;
       }
@@ -89,3 +89,3 @@ return;
       this.initTime = Date.now();
-      this.rafID = (0, _raf2["default"])(this.raf);
+      this.rafID = (0, _raf2['default'])(this.raf);
     } else {
@@ -101,3 +101,3 @@ this.toHeight = -1;
     var progressTime = now - this.initTime > duration ? duration : now - this.initTime;
-    var easeValue = _tweenFunctions2["default"][this.vars.ease](progressTime, this.scrollTop, this.toHeight, duration);
+    var easeValue = _tweenFunctions2['default'][this.vars.ease](progressTime, this.scrollTop, this.toHeight, duration);
     window.scrollTo(window.scrollX, easeValue);
@@ -110,7 +110,7 @@ if (progressTime === duration) {
     } else {
-      this.rafID = (0, _raf2["default"])(this.raf);
+      this.rafID = (0, _raf2['default'])(this.raf);
     }
   },
   cancelRequestAnimationFrame: function cancelRequestAnimationFrame() {
-    _raf2["default"].cancel(this.rafID);
+    _raf2['default'].cancel(this.rafID);
     this.rafID = -1;
@@ -136,5 +136,5 @@ },
 
-    var _mapped = _Mapped2["default"].getMapped();
+    var _mapped = _Mapped2['default'].getMapped();
     if (!_mapped.__arr.length) {
-      _EventDispatcher2["default"].removeEventListener('wheel.scrollWheel', this.onWheel);
+      _EventDispatcher2['default'].removeEventListener('wheel.scrollWheel', this.onWheel);
       return;
@@ -150,4 +150,4 @@ }
       var _arr = _mapped.__arr;
-      var endDom = _Mapped2["default"].get(_arr[_arr.length - 1]);
-      var startDom = _Mapped2["default"].get(_arr[0]);
+      var endDom = _Mapped2['default'].get(_arr[_arr.length - 1]);
+      var startDom = _Mapped2['default'].get(_arr[0]);
       var windowHeight = document.documentElement.clientHeight;
@@ -194,8 +194,8 @@ this.scrollTop = (0, _util.currentScrollTop)();
       this.initTime = Date.now();
-      var currentDom = _Mapped2["default"].get(_Mapped2["default"].getMapped().__arr[this.num]);
+      var currentDom = _Mapped2['default'].get(_Mapped2['default'].getMapped().__arr[this.num]);
       this.toHeight = currentDom ? currentDom.offsetTop : null;
-      this.toHeight = typeof this.toHeight !== 'number' ? endDom.offsetTop + endDom.getBoundingClientRect().height + windowHeight * (this.num - _Mapped2["default"].getMapped().__arr.length) : this.toHeight;
+      this.toHeight = typeof this.toHeight !== 'number' ? endDom.offsetTop + endDom.getBoundingClientRect().height + windowHeight * (this.num - _Mapped2['default'].getMapped().__arr.length) : this.toHeight;
       this.toHeight = this.toHeight < 0 ? 0 : this.toHeight;
       this.toHeight = this.toHeight > docHeight - windowHeight ? docHeight - windowHeight : this.toHeight;
-      this.rafID = (0, _raf2["default"])(this.raf);
+      this.rafID = (0, _raf2['default'])(this.raf);
       this.currentNum = this.num;
@@ -205,6 +205,6 @@ }
   unMount: function unMount() {
-    _EventDispatcher2["default"].removeEventListener('wheel.scrollWheel', this.onWheel);
+    _EventDispatcher2['default'].removeEventListener('wheel.scrollWheel', this.onWheel);
   }
 };
-exports["default"] = {
+exports['default'] = {
   init: ScrollScreen.init.bind(ScrollScreen),
@@ -211,0 +211,0 @@ unMount: ScrollScreen.unMount.bind(ScrollScreen)

lib/util.js

@@ -22,7 +22,7 @@ 'use strict';
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 function toArrayChildren(children) {
   var ret = [];
-  _react2["default"].Children.forEach(children, function (c) {
+  _react2['default'].Children.forEach(children, function (c) {
     ret.push(c);
@@ -67,3 +67,3 @@ });
         if (currentObj[p] !== nextObj[p]) {
-          if ((0, _typeof3["default"])(currentObj[p]) === 'object' && (0, _typeof3["default"])(nextObj[p]) === 'object') {
+          if ((0, _typeof3['default'])(currentObj[p]) === 'object' && (0, _typeof3['default'])(nextObj[p]) === 'object') {
             equalBool = objectEqual(currentObj[p], nextObj[p]);
@@ -85,3 +85,3 @@ } else {
 
-    if ((0, _typeof3["default"])(obj1[key]) === 'object' && (0, _typeof3["default"])(obj2[key]) === 'object') {
+    if ((0, _typeof3['default'])(obj1[key]) === 'object' && (0, _typeof3['default'])(obj2[key]) === 'object') {
       equalBool = objectEqual(obj1[key], obj2[key]);
@@ -102,3 +102,3 @@ } else if (typeof obj1[key] === 'function' && typeof obj2[key] === 'function') {
     }
-    if ((0, _typeof3["default"])(obj2[key]) === 'object' && (0, _typeof3["default"])(obj1[key]) === 'object') {
+    if ((0, _typeof3['default'])(obj2[key]) === 'object' && (0, _typeof3['default'])(obj1[key]) === 'object') {
       equalBool = objectEqual(obj2[key], obj1[key]);
@@ -105,0 +105,0 @@ } else if (typeof obj1[key] === 'function' && typeof obj2[key] === 'function') {

package.json

 {
   "name": "rc-scroll-anim",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "description": "scroll-anim anim component for react",
@@ -23,36 +23,41 @@ "keywords": [
     "assets/*.css",
-    "dist"
+    "dist",
+    "es"
   ],
   "licenses": "MIT",
   "main": "./lib/index",
-  "entry": {
-    "rc-scroll-anim": [
-      "./assets/index.less",
-      "./src/index.js"
-    ]
-  },
+  "module": "./es/index",
   "config": {
-    "port": 8020
+    "port": 8020,
+    "entry": {
+      "rc-scroll-anim": [
+        "./assets/index.less",
+        "./src/index.js"
+      ]
+    }
   },
   "scripts": {
+    "dist": "rc-tools run dist",
     "build": "rc-tools run build",
     "gh-pages": "rc-tools run gh-pages",
     "start": "rc-tools run server",
+    "compile": "rc-tools run compile --babel-runtime",
     "pub": "rc-tools run pub --babel-runtime",
     "lint": "rc-tools run lint",
-    "karma": "rc-tools run karma",
-    "saucelabs": "rc-tools run saucelabs",
-    "test": "rc-tools run test",
-    "chrome-test": "rc-tools run chrome-test",
-    "coverage": "rc-tools run coverage"
+    "karma": "rc-test run karma",
+    "saucelabs": "rc-test run saucelabs",
+    "test": "rc-test run test",
+    "chrome-test": "rc-test run chrome-test",
+    "coverage": "rc-test run coverage"
   },
   "devDependencies": {
+    "core-js": "^2.5.1",
     "expect.js": "0.3.x",
     "pre-commit": "1.x",
+    "rc-test": "6.x",
+    "rc-tools": "6.x",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "rc-animate": "2.x",
-    "rc-queue-anim": "^1.0.1",
-    "rc-tools": "5.x",
-    "react": "~15.5.0",
-    "react-addons-test-utils": "~15.5.0",
-    "react-dom": "~15.5.0"
+    "rc-queue-anim": "^1.3.0"
   },
@@ -64,7 +69,7 @@ "pre-commit": [
     "babel-runtime": "6.x",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.6.0",
     "raf": "3.x",
-    "rc-tween-one": "~1.2.5",
+    "rc-tween-one": "~1.3.0",
     "tween-functions": "1.x"
   }
 }

README.md

@@ -148,2 +148,3 @@ # rc-scroll-anim
 | always    | boolean        | `true`  | -            |
+| targetId  |  string        | null    | refer Element `targetId` |
 | component | string         | `div`   | -            |
@@ -165,2 +166,5 @@
 ### Link
+
+> v1.1.0 remove onAsynchronousAddEvent. [Asynchronous demo](http://react-component.github.io/scroll-anim/examples/linkAsynchronous.html)
+
 | name      | type           | default | description    |
@@ -176,5 +180,5 @@ |-----------|----------------|---------|----------------|
 | offsetTop |  number        |  0      | scroll to elem top offset   |
+| targetId  |  string        | null    | refer Element `targetId` |
 | onFocus   | func           | null    | check callback,onFocus({target,to}) |
 | onBlur    | func           | null    | blur callback |
-| onAsynchronousAddEvent | func | null | Asynchronous add onScroll; callback(function) [refs](http://react-component.github.io/scroll-anim/examples/linkAsynchronous.html) |
 | component | string         | `div`   | -            |
@@ -181,0 +185,0 @@

New 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

Improved metrics

Number of package files

30

increased by36.36%

Lines of code

9222

increased by13.17%

Number of lines in readme file

206

increased by1.98%

Worsened metrics

Total package byte prevSize

752399

decreased by-38.52%

Dev dependency count

9

increased by12.5%

Number of medium supply chain risk alerts

6

increased by200%

Dependency changes

• + Addedrc-tween-one@1.3.1(transitive)

• - Removedrc-tween-one@1.2.9(transitive)

• Updatedprop-types@^15.6.0

• Updatedrc-tween-one@~1.3.0