update 1.0.0

Author: jljsj33

examples/link.js

@@ -85,7 +85,7 @@ class Demo extends React.Component {
           </div>
         </QueueAnim>
       </Element>
-      <ScrollOverPack id="page1" className="page1" hideProps={{ 0: { reverse: true } }}>
+      <ScrollOverPack id="page1" className="page1">
         <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
           默认进入与出场
         </TweenOne>
@@ -102,7 +102,6 @@ class Demo extends React.Component {
         style={{ backgroundColor: '#0098CE' }}
         always={false}
         id="page2"
-        hideProps={{ 1: { reverse: true } }}
       >
         <div className="page2-title">只进入一次</div>
         <Animate key="0" transitionName="fade" transitionAppear>
@@ -121,7 +120,6 @@ class Demo extends React.Component {
         style={{ backgroundColor: '#174270' }}
         playScale={0.8}
         id="page3"
-        hideProps={{ title: { reverse: true }, 1: { reverse: true } }}
       >
         <TweenOne animation={{ opacity: 1 }} style={{ opacity: 0 }} key="title"
           className="page2-title"

examples/linkAsynchronous.js

@@ -90,7 +90,7 @@ class Demo extends React.Component {
             </div>
           </QueueAnim>
         </Element>,
-        <ScrollOverPack id="page1" className="page1" hideProps={{ 0: { reverse: true } }} key="1">
+        <ScrollOverPack id="page1" className="page1" key="1">
           <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
             默认进入与出场
           </TweenOne>
@@ -107,7 +107,6 @@ class Demo extends React.Component {
           style={{ backgroundColor: '#0098CE' }}
           always={false}
           id="page2"
-          hideProps={{ 1: { reverse: true } }}
           key="2"
         >
           <div className="page2-title">只进入一次</div>
@@ -127,7 +126,6 @@ class Demo extends React.Component {
           style={{ backgroundColor: '#174270' }}
           playScale={0.8}
           id="page3"
-          hideProps={{ title: { reverse: true }, 1: { reverse: true } }}
           key="3"
         >
           <TweenOne animation={{ opacity: 1 }} style={{ opacity: 0 }} key="title"

examples/scrollScreen.js

@@ -95,7 +95,6 @@ class Demo extends React.Component {
           className="page1"
           playScale={1}
           replay
-          hideProps={{ 0: { reverse: true } }}
           location="page1"
           style={{ marginTop: 150 }}
         >
@@ -116,7 +115,6 @@ class Demo extends React.Component {
         style={{ backgroundColor: '#174270', height: 500 }}
         id="page2"
         playScale={1}
-        hideProps={{ t: { reverse: true }, 1: { reverse: true } }}
       >
         <TweenOne className="tween-one" animation={{ opacity: 1 }} key="t">
           只从上往下时播放
@@ -138,7 +136,6 @@ class Demo extends React.Component {
         always={false}
         id="page3"
         playScale={1}
-        hideProps={{ t: { reverse: true }, 1: { reverse: true } }}
       >
         <TweenOne
           animation={{ opacity: 1 }}

examples/simple.js

@@ -30,10 +30,25 @@ class Demo extends React.Component {
       <ScrollOverPack
         id="page1"
         className="page1" replay
-        hideProps={{ 0: { reverse: true } }}
       >
         <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
-          默认进入与出场
+          默认进入与出场, 顶部出场
+        </TweenOne>
+        <QueueAnim key="1">
+          <div key="0" className="demo"></div>
+          <div key="1" className="demo" style={{ backgroundColor: '#F38EAD' }}></div>
+          <div key="2" className="demo"></div>
+          <div key="3" className="demo"></div>
+        </QueueAnim>
+      </ScrollOverPack>
+
+      <ScrollOverPack
+        id="page4"
+        className="page1"
+        appear={false}
+      >
+        <TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
+          默认出场直接出现
         </TweenOne>
         <QueueAnim key="1">
           <div key="0" className="demo"></div>
@@ -48,7 +63,6 @@ class Demo extends React.Component {
         className="pack-page page2"
         style={{ backgroundColor: '#0098CE' }} always={false}
         id="page2"
-        hideProps={{ title: { reverse: true } }}
       >
         <TweenOne key="title" animation={{ opacity: 0, type: 'from' }} className="page2-title">
           只进入一次
@@ -66,7 +80,6 @@ class Demo extends React.Component {
         className="pack-page page3"
         style={{ backgroundColor: '#174270' }}
         playScale={0.8} id="page3"
-        hideProps={{ title: { reverse: true }, 1: { reverse: true } }}
       >
         <TweenOne
           animation={{ opacity: 1 }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-scroll-anim",
-  "version": "0.6.5",
+  "version": "1.0.0",
   "description": "scroll-anim anim component for react",
   "keywords": [
     "react",
@@ -58,7 +58,7 @@
   "dependencies": {
     "babel-runtime": "6.x",
     "raf": "3.x",
-    "rc-tween-one": "~0.11.6",
+    "rc-tween-one": "~1.1.2",
     "tween-functions": "1.x"
   }
 }

src/EventDispatcher.js

@@ -3,6 +3,7 @@ function EventDispatcher(target) {
   this._listeners = {};
   this._eventTarget = target || {};
   this.recoverLists = [];
+  this._listFun = {};
 }
 EventDispatcher.prototype = {
   addEventListener(type, callback) {
@@ -26,12 +27,15 @@ EventDispatcher.prototype = {
         index = i + 1;
       }
     }
-    const func = this.dispatchEvent.bind(this, _type);
-    list.splice(index, 0, { c: callback, n: namespaces, t: _type, func });
-    if (this._eventTarget.addEventListener) {
-      this._eventTarget.addEventListener(_type, func, false);
-    } else if (this._eventTarget.attachEvent) {
-      this._eventTarget.attachEvent(`on${_type}`, func);
+
+    list.splice(index, 0, { c: callback, n: namespaces, t: _type });
+    if (!this._listFun[_type]) {
+      this._listFun[_type] = this._listFun[_type] || this.dispatchEvent.bind(this, _type);
+      if (this._eventTarget.addEventListener) {
+        this._eventTarget.addEventListener(_type, this._listFun[_type], false);
+      } else if (this._eventTarget.attachEvent) {
+        this._eventTarget.attachEvent(`on${_type}`, this._listFun[_type]);
+      }
     }
   },
 
@@ -49,12 +53,17 @@ EventDispatcher.prototype = {
       i = list.length;
       while (--i > -1) {
         if (list[i].c === callback && (_force || list[i].n === namespaces)) {
-          if (this._eventTarget.removeEventListener) {
-            this._eventTarget.removeEventListener(list[i].t, list[i].func);
-          } else if (this._eventTarget.detachEvent) {
-            this._eventTarget.detachEvent(`on${list[i].t}`, list[i].func);
-          }
           list.splice(i, 1);
+          if (!list.length) {
+            const func = this._listFun[_type];
+            delete this._listeners[_type];
+            delete this._listFun[_type];
+            if (this._eventTarget.removeEventListener) {
+              this._eventTarget.removeEventListener(_type, func);
+            } else if (this._eventTarget.detachEvent) {
+              this._eventTarget.detachEvent(`on${_type}`, func);
+            }
+          }
           if (!_force) {
             return;
           }

src/ScrollElement.jsx

@@ -16,9 +16,12 @@ class ScrollElement extends React.Component {
       mapped.register(this.props.id, this.dom);
     }
     const date = Date.now();
+    const scrollTop = currentScrollTop();
+    if (!scrollTop) {
+      this.scrollEventListener();
+    }
     const length = EventListener._listeners.scroll ? EventListener._listeners.scroll.length : 0;
     this.eventType = `scroll.scrollEvent${date}${length}`;
-    this.scrollEventListener();
     EventListener.addEventListener(this.eventType, this.scrollEventListener);
   }
 

src/ScrollOverPack.jsx

@@ -1,4 +1,5 @@
 import React, { createElement } from 'react';
+import TweenOne from 'rc-tween-one';
 import EventListener from './EventDispatcher';
 import ScrollElement from './ScrollElement';
 import { toArrayChildren } from './util';
@@ -9,18 +10,19 @@ function noop() {
 class ScrollOverPack extends ScrollElement {
   constructor(props) {
     super(props);
-    this.children = toArrayChildren(this.props.children);
+    this.children = toArrayChildren(props.children);
     this.oneEnter = false;
     this.enter = false;
     this.state = {
       show: false,
-      children: toArrayChildren(this.props.children),
+      children: toArrayChildren(props.children),
     };
   }
 
   scrollEventListener = (e) => {
     this.getParam(e);
-    if (this.enter) {
+    const isTop = this.elementShowHeight > this.clientHeight + this.leavePlayHeight;
+    if (this.enter || !this.props.replay && isTop) {
       if (!this.state.show) {
         this.setState({
           show: true,
@@ -29,16 +31,16 @@ class ScrollOverPack extends ScrollElement {
       if (!this.props.always) {
         EventListener.removeEventListener(this.eventType, this.scrollEventListener);
       }
-    }
-    const bottomLeave = this.elementShowHeight < this.playHeight;
-    // 设置往上时的出场点...
-    const topLeave = this.props.replay ?
-    this.elementShowHeight > this.clientHeight + this.leavePlayHeight : null;
-    if (topLeave || bottomLeave) {
-      if (this.state.show) {
-        this.setState({
-          show: false,
-        });
+    } else {
+      const bottomLeave = this.elementShowHeight < this.playHeight;
+      // 设置往上时的出场点...
+      const topLeave = this.props.replay ? isTop : null;
+      if (topLeave || bottomLeave) {
+        if (this.state.show) {
+          this.setState({
+            show: false,
+          });
+        }
       }
     }
   }
@@ -51,12 +53,13 @@ class ScrollOverPack extends ScrollElement {
       'component',
       'always',
       'scrollEvent',
-      'hideProps',
+      'appear',
       'location',
     ].forEach(key => delete placeholderProps[key]);
     let childToRender;
-    if (!this.oneEnter && !this.state.show) {
-      childToRender = createElement(this.props.component, { ...placeholderProps }, null);
+    if (!this.oneEnter) {
+      const children = !this.props.appear && this.props.children;
+      childToRender = createElement(this.props.component, { ...placeholderProps }, children);
       this.oneEnter = true;
     } else {
       if (!this.state.show) {
@@ -65,9 +68,8 @@ class ScrollOverPack extends ScrollElement {
             return null;
           }
           let element;
-          const hideProps = this.props.hideProps[item.key];
-          if (hideProps) {
-            element = React.cloneElement(item, { ...hideProps });
+          if (item.type === TweenOne) {
+            element = React.cloneElement(item, { reverse: true });
             return element;
           }
           element = React.cloneElement(item, {}, null);
@@ -91,7 +93,7 @@ ScrollOverPack.propTypes = {
   style: React.PropTypes.any,
   replay: React.PropTypes.bool,
   onChange: React.PropTypes.func,
-  hideProps: React.PropTypes.object,
+  appear: React.PropTypes.bool,
 };
 
 ScrollOverPack.defaultProps = {
@@ -101,7 +103,7 @@ ScrollOverPack.defaultProps = {
   scrollEvent: noop,
   replay: false,
   onChange: noop,
-  hideProps: {},
+  appear: true,
 };
 
 export default ScrollOverPack;