Skip to content

Commit 81ff727

Browse files
jljsj33jljsj33
authored
Merge pull request #17 from react-component/1.0
update 1.0.0
2 parents 791af25 + 2841c08 commit 81ff727

12 files changed

+160
-65
lines changed

‎.travis.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ notifications:
77
- [email protected]
88

99
node_js:
10-
- 4.0.0
10+
- 6.0.0
1111

1212
before_install:
1313
- |

‎README.md

+5-2
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ var React = require('react');
6767

6868
// ScrollOverPack support rc-animate,rc-queue-anim,rc-tween-one;
6969

70-
React.render(<ScrollOverPack hideProps={{ tweenOne: { reverse: true } }}>
70+
React.render(<ScrollOverPack>
7171
<QueueAnim key='queueAnim'>
7272
<div key='a'>enter</div>
7373
<div key='b'>enter</div>
@@ -118,6 +118,7 @@ ScrollAnim.scrollScreen.unMount();
118118
|-----------|----------------|---------|----------------|
119119
| component | string | `div` | - |
120120
| id | string | null | need to location the id，parallax the `location` or link the `to`, need to use |
121+
| targetId | string | null | scroll target id, if don't window scroll, parent element is `overflow: scroll`, use parent id to do scroll; [demo refs](http://react-component.github.io/scroll-anim/examples/target.html) |
121122
| playScale | number / array | `0.5` | percentage of screen to start play, screen center is 0.5, if replay is true : [bottomEnter, topLeave]， topLeave >= bottomEnter |
122123
| onChange | func | null | change callback({ mode, scrollName }); mode: `enter` or `leave` |
123124
| location | string | null | v0.6.0 above have,location, the parent id; |
@@ -128,11 +129,13 @@ ScrollAnim.scrollScreen.unMount();
128129

129130
OverPack inherit Element; `component` `playScale` `onChange` `location` refer to `Element`;
130131

132+
> 1.0.0 remove hideProps;
133+
131134
| name | type | default | description |
132135
|-----------|----------------|---------|----------------|
133136
| always | boolean | `true` | back to top, enter replay，as `false` will only play it again, leave does not play |
134137
| replay | boolean | `false` | play every enter, do you want to animate each time you show the current, `false` only scroll to down play animate |
135-
| hideProps | object | `null` | v0.3.0 children hideProps move here. If the child does not have, default: { children: null }. children be `rc-tween-one` { 'userKey': { reverse: true }} |
138+
| appear | boolean | `true` | whether support appear the operation |
136139

137140
### Parallax
138141
| name | type | default | description |

‎examples/link.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ class Demo extends React.Component {
8585
</div>
8686
</QueueAnim>
8787
</Element>
88-
<ScrollOverPack id="page1" className="page1" hideProps={{ 0: { reverse: true } }}>
88+
<ScrollOverPack id="page1" className="page1">
8989
<TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
9090
默认进入与出场
9191
</TweenOne>
@@ -102,7 +102,6 @@ class Demo extends React.Component {
102102
style={{ backgroundColor: '#0098CE' }}
103103
always={false}
104104
id="page2"
105-
hideProps={{ 1: { reverse: true } }}
106105
>
107106
<div className="page2-title">只进入一次</div>
108107
<Animate key="0" transitionName="fade" transitionAppear>
@@ -121,7 +120,6 @@ class Demo extends React.Component {
121120
style={{ backgroundColor: '#174270' }}
122121
playScale={0.8}
123122
id="page3"
124-
hideProps={{ title: { reverse: true }, 1: { reverse: true } }}
125123
>
126124
<TweenOne animation={{ opacity: 1 }} style={{ opacity: 0 }} key="title"
127125
className="page2-title"

‎examples/linkAsynchronous.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ class Demo extends React.Component {
9090
</div>
9191
</QueueAnim>
9292
</Element>,
93-
<ScrollOverPack id="page1" className="page1" hideProps={{ 0: { reverse: true } }} key="1">
93+
<ScrollOverPack id="page1" className="page1" key="1">
9494
<TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
9595
默认进入与出场
9696
</TweenOne>
@@ -107,7 +107,6 @@ class Demo extends React.Component {
107107
style={{ backgroundColor: '#0098CE' }}
108108
always={false}
109109
id="page2"
110-
hideProps={{ 1: { reverse: true } }}
111110
key="2"
112111
>
113112
<div className="page2-title">只进入一次</div>
@@ -127,7 +126,6 @@ class Demo extends React.Component {
127126
style={{ backgroundColor: '#174270' }}
128127
playScale={0.8}
129128
id="page3"
130-
hideProps={{ title: { reverse: true }, 1: { reverse: true } }}
131129
key="3"
132130
>
133131
<TweenOne animation={{ opacity: 1 }} style={{ opacity: 0 }} key="title"

‎examples/scrollScreen.js

-3
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,6 @@ class Demo extends React.Component {
9595
className="page1"
9696
playScale={1}
9797
replay
98-
hideProps={{ 0: { reverse: true } }}
9998
location="page1"
10099
style={{ marginTop: 150 }}
101100
>
@@ -116,7 +115,6 @@ class Demo extends React.Component {
116115
style={{ backgroundColor: '#174270', height: 500 }}
117116
id="page2"
118117
playScale={1}
119-
hideProps={{ t: { reverse: true }, 1: { reverse: true } }}
120118
>
121119
<TweenOne className="tween-one" animation={{ opacity: 1 }} key="t">
122120
只从上往下时播放
@@ -138,7 +136,6 @@ class Demo extends React.Component {
138136
always={false}
139137
id="page3"
140138
playScale={1}
141-
hideProps={{ t: { reverse: true }, 1: { reverse: true } }}
142139
>
143140
<TweenOne
144141
animation={{ opacity: 1 }}

‎examples/simple.js

+17-4
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,25 @@ class Demo extends React.Component {
3030
<ScrollOverPack
3131
id="page1"
3232
className="page1" replay
33-
hideProps={{ 0: { reverse: true } }}
3433
>
3534
<TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
36-
默认进入与出场
35+
默认进入与出场, 顶部出场
36+
</TweenOne>
37+
<QueueAnim key="1">
38+
<div key="0" className="demo"></div>
39+
<div key="1" className="demo" style={{ backgroundColor: '#F38EAD' }}></div>
40+
<div key="2" className="demo"></div>
41+
<div key="3" className="demo"></div>
42+
</QueueAnim>
43+
</ScrollOverPack>
44+
45+
<ScrollOverPack
46+
id="page4"
47+
className="page1"
48+
appear={false}
49+
>
50+
<TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
51+
默认出场直接出现
3752
</TweenOne>
3853
<QueueAnim key="1">
3954
<div key="0" className="demo"></div>
@@ -48,7 +63,6 @@ class Demo extends React.Component {
4863
className="pack-page page2"
4964
style={{ backgroundColor: '#0098CE' }} always={false}
5065
id="page2"
51-
hideProps={{ title: { reverse: true } }}
5266
>
5367
<TweenOne key="title" animation={{ opacity: 0, type: 'from' }} className="page2-title">
5468
只进入一次
@@ -66,7 +80,6 @@ class Demo extends React.Component {
6680
className="pack-page page3"
6781
style={{ backgroundColor: '#174270' }}
6882
playScale={0.8} id="page3"
69-
hideProps={{ title: { reverse: true }, 1: { reverse: true } }}
7083
>
7184
<TweenOne
7285
animation={{ opacity: 1 }}

‎examples/target.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
placeholder

‎examples/target.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// use jsx to render html, do not modify simple.html
2+
3+
import 'rc-scroll-anim/assets/index.less';
4+
import ScrollAnim from 'rc-scroll-anim';
5+
import React from 'react';
6+
import ReactDOM from 'react-dom';
7+
import QueueAnim from 'rc-queue-anim';
8+
import TweenOne from 'rc-tween-one';
9+
const _package = require('../package.json');
10+
const ScrollOverPack = ScrollAnim.OverPack;
11+
12+
class Demo extends React.Component {
13+
constructor() {
14+
super(...arguments);
15+
}
16+
17+
render() {
18+
return (<div style={{ height: '100vh', overflow: 'scroll' }} id="box">
19+
<div className="pack-page page0">
20+
<QueueAnim className="home-title">
21+
<div className="page-title" key="title">
22+
<p>{_package.name}@{_package.version}</p>
23+
</div>
24+
<div className="page-description" key="c">
25+
<p>The simple demo</p>
26+
</div>
27+
</QueueAnim>
28+
</div>
29+
<ScrollOverPack
30+
id="page1"
31+
className="page1"
32+
replay
33+
targetId="box"
34+
>
35+
<TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
36+
默认进入与出场, 顶部出场
37+
</TweenOne>
38+
<QueueAnim key="1">
39+
<div key="0" className="demo"></div>
40+
<div key="1" className="demo" style={{ backgroundColor: '#F38EAD' }}></div>
41+
<div key="2" className="demo"></div>
42+
<div key="3" className="demo"></div>
43+
</QueueAnim>
44+
</ScrollOverPack>
45+
46+
<ScrollOverPack
47+
id="page4"
48+
className="page1"
49+
appear={false}
50+
style={{ backgroundColor: '#0098CE' }}
51+
targetId="box"
52+
>
53+
<TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
54+
默认出场直接出现
55+
</TweenOne>
56+
<QueueAnim key="1">
57+
<div key="0" className="demo"></div>
58+
<div key="1" className="demo" style={{ backgroundColor: '#F38EAD' }}></div>
59+
<div key="2" className="demo"></div>
60+
<div key="3" className="demo"></div>
61+
</QueueAnim>
62+
</ScrollOverPack>
63+
64+
</div>);
65+
}
66+
}
67+
68+
ReactDOM.render(<Demo />, document.getElementById('__react-content'));

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "rc-scroll-anim",
3-
"version": "0.6.5",
3+
"version": "1.0.0",
44
"description": "scroll-anim anim component for react",
55
"keywords": [
66
"react",
@@ -58,7 +58,7 @@
5858
"dependencies": {
5959
"babel-runtime": "6.x",
6060
"raf": "3.x",
61-
"rc-tween-one": "~0.11.6",
61+
"rc-tween-one": "~1.1.2",
6262
"tween-functions": "1.x"
6363
}
6464
}

‎src/EventDispatcher.js

+26-17
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ function EventDispatcher(target) {
33
this._listeners = {};
44
this._eventTarget = target || {};
55
this.recoverLists = [];
6+
this._listFun = {};
67
}
78
EventDispatcher.prototype = {
8-
addEventListener(type, callback) {
9+
addEventListener(type, callback, target) {
910
const types = type.split('.');
1011
const _type = types[0];
1112
const namespaces = types[1];
@@ -26,16 +27,19 @@ EventDispatcher.prototype = {
2627
index = i + 1;
2728
}
2829
}
29-
const func = this.dispatchEvent.bind(this, _type);
30-
list.splice(index, 0, { c: callback, n: namespaces, t: _type, func });
31-
if (this._eventTarget.addEventListener) {
32-
this._eventTarget.addEventListener(_type, func, false);
33-
} else if (this._eventTarget.attachEvent) {
34-
this._eventTarget.attachEvent(`on${_type}`, func);
30+
31+
list.splice(index, 0, { c: callback, n: namespaces, t: _type });
32+
if (!this._listFun[_type]) {
33+
this._listFun[_type] = this._listFun[_type] || this.dispatchEvent.bind(this, _type);
34+
if (this._eventTarget.addEventListener) {
35+
(target || this._eventTarget).addEventListener(_type, this._listFun[_type], false);
36+
} else if (this._eventTarget.attachEvent) {
37+
(target || this._eventTarget).attachEvent(`on${_type}`, this._listFun[_type]);
38+
}
3539
}
3640
},
3741

38-
removeEventListener(type, callback, force) {
42+
removeEventListener(type, callback, target, force) {
3943
const types = type.split('.');
4044
const _type = types[0];
4145
const namespaces = types[1];
@@ -49,12 +53,17 @@ EventDispatcher.prototype = {
4953
i = list.length;
5054
while (--i > -1) {
5155
if (list[i].c === callback && (_force || list[i].n === namespaces)) {
52-
if (this._eventTarget.removeEventListener) {
53-
this._eventTarget.removeEventListener(list[i].t, list[i].func);
54-
} else if (this._eventTarget.detachEvent) {
55-
this._eventTarget.detachEvent(`on${list[i].t}`, list[i].func);
56-
}
5756
list.splice(i, 1);
57+
if (!list.length) {
58+
const func = this._listFun[_type];
59+
delete this._listeners[_type];
60+
delete this._listFun[_type];
61+
if (this._eventTarget.removeEventListener) {
62+
(target || this._eventTarget).removeEventListener(_type, func);
63+
} else if (this._eventTarget.detachEvent) {
64+
(target || this._eventTarget).detachEvent(`on${_type}`, func);
65+
}
66+
}
5867
if (!_force) {
5968
return;
6069
}
@@ -80,7 +89,7 @@ EventDispatcher.prototype = {
8089
}
8190
}
8291
},
83-
removeAllType(type) {
92+
removeAllType(type, target) {
8493
const types = type.split('.');
8594
const _type = types[0];
8695
const namespaces = types[1];
@@ -89,16 +98,16 @@ EventDispatcher.prototype = {
8998
item.n && item.n.match(namespaces)
9099
));
91100
this.recoverLists.forEach(item => {
92-
this.removeEventListener(`${item.t}.${item.n}`, item.c);
101+
this.removeEventListener(`${item.t}.${item.n}`, item.c, target);
93102
});
94103
},
95-
reAllType(type) {
104+
reAllType(type, target) {
96105
const types = type.split('.');
97106
const _type = types[0];
98107
const namespaces = types[1];
99108
this.recoverLists = this.recoverLists.map(item => {
100109
if (item.t === _type && item.n.match(namespaces)) {
101-
this.addEventListener(`${item.t}.${item.n}`, item.c);
110+
this.addEventListener(`${item.t}.${item.n}`, item.c, target);
102111
return null;
103112
}
104113
return item;

‎src/ScrollElement.jsx

+13-8
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,14 @@ class ScrollElement extends React.Component {
1616
mapped.register(this.props.id, this.dom);
1717
}
1818
const date = Date.now();
19+
const scrollTop = currentScrollTop();
20+
if (!scrollTop) {
21+
this.scrollEventListener();
22+
}
1923
const length = EventListener._listeners.scroll ? EventListener._listeners.scroll.length : 0;
2024
this.eventType = `scroll.scrollEvent${date}${length}`;
21-
this.scrollEventListener();
22-
EventListener.addEventListener(this.eventType, this.scrollEventListener);
25+
this.target = this.props.targetId && document.getElementById(this.props.targetId);
26+
EventListener.addEventListener(this.eventType, this.scrollEventListener, this.target);
2327
}
2428

2529
componentWillReceiveProps(nextProps) {
@@ -30,15 +34,15 @@ class ScrollElement extends React.Component {
3034

3135
componentWillUnmount() {
3236
mapped.unRegister(this.props.id);
33-
EventListener.removeEventListener(this.eventType, this.scrollEventListener);
37+
EventListener.removeEventListener(this.eventType, this.scrollEventListener, this.target);
3438
}
3539

3640
getParam = (e) => {
37-
this.clientHeight = windowHeight();
38-
const scrollTop = currentScrollTop();
39-
// 屏幕缩放时的响应，所以放回这里，这个是pack，只处理子级里面的动画，所以marginTop无关系，所以不需减掉；
41+
this.clientHeight = this.target ? this.target.getBoundingClientRect().height : windowHeight();
42+
const windowScrollTop = this.target ? currentScrollTop() : 0;
43+
const scrollTop = this.target ? this.target.scrollTop : currentScrollTop();
4044
const domRect = this.dom.getBoundingClientRect();
41-
const offsetTop = domRect.top + scrollTop;
45+
const offsetTop = domRect.top + scrollTop + windowScrollTop;
4246
this.elementShowHeight = scrollTop - offsetTop + this.clientHeight;
4347
const playScale = transformArguments(this.props.playScale);
4448
this.playHeight = this.clientHeight * playScale[0];
@@ -60,7 +64,7 @@ class ScrollElement extends React.Component {
6064

6165
render() {
6266
const { ...props } = this.props;
63-
['component', 'playScale', 'location'].forEach(key => delete props[key]);
67+
['component', 'playScale', 'location', 'targetId'].forEach(key => delete props[key]);
6468
return React.createElement(this.props.component, { ...props });
6569
}
6670
}
@@ -71,6 +75,7 @@ ScrollElement.propTypes = {
7175
id: React.PropTypes.string,
7276
onChange: React.PropTypes.func,
7377
location: React.PropTypes.string,
78+
targetId: React.PropTypes.string,
7479
};
7580

7681
ScrollElement.defaultProps = {

0 commit comments

Comments
 (0)