add element location

react-component · Dec 12, 2016 · 665a918 · 665a918
1 parent 61b9273
commit 665a918
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -120,12 +120,13 @@ ScrollAnim.scrollScreen.unMount();
 | id | string         | null    | need to location the id，parallax the `location` or link the `to`, need to use |
 | playScale | number / array        | `0.5`   | percentage of screen to start play, screen center is 0.5, if replay is true : [bottomEnter, topLeave]， topLeave >= bottomEnter |
 | onChange  | func           | null     | change callback({ mode, scrollName }); mode: `enter` or `leave` |
+| location  | string         | null     |  v0.6.0 above have,location, the parent id; |
 
 > Note: if the element is not the above component, you need to location this element; please use the `Element`
 
 ### OverPack 
 
-OverPack inherit Element; `component` `playScale` `onChange` refer to  `Element`;
+OverPack inherit Element; `component` `playScale` `onChange` `location` refer to  `Element`;
 
 | name      | type           | default | description    |
 |-----------|----------------|---------|----------------|
@@ -137,7 +138,7 @@ OverPack inherit Element; `component` `playScale` `onChange` refer to  `Element`
 | name      | type           | default | description    |
 |-----------|----------------|---------|----------------|
 | animation      | object / array | `null`  | animation data     |
-| location  | string         | `null`  | location, `Element` the id, only scroll name |
+| location  | string         | `null`  | location, the parent id |
 | always    | boolean        | `true`  | -            |
 | component | string         | `div`   | -            |
 

diff --git a/examples/scrollScreen.js b/examples/scrollScreen.js
@@ -90,23 +90,25 @@ class Demo extends React.Component {
           </div>
         </QueueAnim>
       </Element>
-      <ScrollOverPack
-        id="page1"
-        className="page1"
-        playScale={1}
-        replay
-        hideProps={{ 0: { reverse: true } }}
-      >
-        <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
-          每次进入都启动播放
-        </TweenOne>
-        <QueueAnim key="1" style={{ height: 100 }}>
-          <div key="0" className="demo"></div>
-          <div key="1" className="demo"></div>
-          <div key="2" className="demo"></div>
-          <div key="3" className="demo"></div>
-        </QueueAnim>
-      </ScrollOverPack>
+      <div id="page1">
+        <ScrollOverPack
+          className="page1"
+          playScale={1}
+          replay
+          hideProps={{ 0: { reverse: true } }}
+          location="page1"
+        >
+          <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
+            每次进入都启动播放
+          </TweenOne>
+          <QueueAnim key="1" style={{ height: 100 }}>
+            <div key="0" className="demo"></div>
+            <div key="1" className="demo"></div>
+            <div key="2" className="demo"></div>
+            <div key="3" className="demo"></div>
+          </QueueAnim>
+        </ScrollOverPack>
+      </div>
 
       <ScrollOverPack
         className="pack-page page2"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-scroll-anim",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "scroll-anim anim component for react",
   "keywords": [
     "react",

diff --git a/src/ScrollElement.jsx b/src/ScrollElement.jsx
@@ -9,7 +9,9 @@ const noop = () => {
 class ScrollElement extends React.Component {
   componentDidMount() {
     this.dom = ReactDOM.findDOMNode(this);
-    if (this.props.id) {
+    if (this.props.location) {
+      mapped.register(this.props.location, document.getElementById(this.props.location));
+    } else if (this.props.id) {
       mapped.register(this.props.id, this.dom);
     }
     const date = Date.now();
@@ -57,7 +59,7 @@ class ScrollElement extends React.Component {
 
   render() {
     const { ...props } = this.props;
-    ['component', 'playScale'].forEach(key => delete props[key]);
+    ['component', 'playScale', 'location'].forEach(key => delete props[key]);
     return React.createElement(this.props.component, { ...props });
   }
 }
@@ -67,6 +69,7 @@ ScrollElement.propTypes = {
   playScale: React.PropTypes.any,
   id: React.PropTypes.string,
   onChange: React.PropTypes.func,
+  location: React.PropTypes.string,
 };
 
 ScrollElement.defaultProps = {

diff --git a/src/ScrollOverPack.jsx b/src/ScrollOverPack.jsx
@@ -52,6 +52,7 @@ class ScrollOverPack extends ScrollElement {
       'always',
       'scrollEvent',
       'hideProps',
+      'location',
     ].forEach(key => delete placeholderProps[key]);
     let childToRender;
     if (!this.oneEnter && !this.state.show) {