Skip to content

Commit 214aae5

Browse files
jljsj33jljsj33
committed
bump 0.5.0
1 parent 8b387f7 commit 214aae5

16 files changed

+477
-223
lines changed

‎HISTORY.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
## 0.5.0
2+
3+
1. scrollElement 将支持 onChange, 进入与出去时触发.
4+
2. 所有的 scrollName 变更成 id;
5+
3. 去除 parallax 里的 scrollName;
6+
4. scrollLink 重构, 点击后直接回调 onFocus,
7+
5. scrollLink 增加将 to 添加到链接; toHash 设为 false 为不添加到链接.
8+
6. scrollLink 增加异步添加事件 onAsynchronousAddEvent(func);
9+
7. ScrollParallax 回调分开,增加 onStartBack, onCompleteBack.

‎README.md

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -112,16 +112,25 @@ ScrollAnim.scrollScreen.unMount();
112112

113113
### props
114114

115-
### OverPack
115+
### Element
116116

117117
| name | type | default | description |
118118
|-----------|----------------|---------|----------------|
119-
| component | string | `div` | component tag |
119+
| component | string | `div` | - |
120+
| id | string | null | need to location the id，parallax the `location` or link the `to`, need to use |
120121
| playScale | number / array | `0.5` | percentage of screen to start play, screen center is 0.5, if replay is true : [bottomEnter, topLeave]， topLeave >= bottomEnter |
122+
| onChange | func | null | change callback({ mode, scrollName }); mode: `enter` or `leave` |
123+
124+
> Note: if the element is not the above component, you need to location this element; please use the `Element`
125+
126+
### OverPack
127+
128+
OverPack inherit Element; `component` `scrollName` `playScale` `onChange` refer to `Element`;
129+
130+
| name | type | default | description |
131+
|-----------|----------------|---------|----------------|
121132
| always | boolean | `true` | back to top, enter replay，as `false` will only play it again, leave does not play |
122-
| scrollName| string | `null` | need to location the name，parallax the `location` or link the `location`, need to use |
123133
| replay | boolean | `false` | play every enter, do you want to animate each time you show the current, `false` only scroll to down play animate |
124-
| onChange | func | `null` | callback({ mode, scrollName }), mode: `enter` `leave` |
125134
| 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 }} |
126135

127136
### react 15.2.0 react-unknown-prop warnings, hideProps move to tag.
@@ -136,9 +145,8 @@ ScrollAnim.scrollScreen.unMount();
136145
| name | type | default | description |
137146
|-----------|----------------|---------|----------------|
138147
| animation | object / array | `null` | animation data |
139-
| location | string | `null` | location, `Element` the `scrollName`, only scroll name |
148+
| location | string | `null` | location, `Element` the id, only scroll name |
140149
| always | boolean | `true` | - |
141-
| scrollName| string | `null` | - |
142150
| component | string | `div` | - |
143151

144152
#### animation = { }
@@ -147,34 +155,29 @@ ScrollAnim.scrollScreen.unMount();
147155
| playScale | array | `[0, 1]`| play area, [start, end]<br/> timeline: `[{playScale: [0, 0.2]}, {playScale: [0, 0.8]}]]`, Second will increase by 0.2, The second end is 1 |
148156
| ease | string | `easeInOutQuad`| animation easing string |
149157
| onUpdate | function | - | animate updates, callback: onUpdate(easeValue}) |
150-
| onStart | function | - | animate start (playScale[0]) callback; |
151-
| onComplete| function | - | animate completed (playScale[1]) callback |
158+
| onStart | function | - | scroll down animate start (playScale[0]) callback; |
159+
| onComplete| function | - | scroll down animate completed (playScale[1]) callback |
160+
| onStartBack | function | - | scroll up animate start (playScale[1]) callback; |
161+
| onCompleteBack | function | - | scroll up animate completed (playScale[0]) callback; |
152162

153163
> animation = [{},{}] 时为timeline;
154164
155165
### Link
156166
| name | type | default | description |
157167
|-----------|----------------|---------|----------------|
158-
| location | string | `null` | need; Specifies the element to top; `Element` the `scrollName` |
168+
| to | string | `null` | need; Specifies the element to top; `Element` the id |
169+
| toHash | boolean | true | add `to` to the `location.hash` |
159170
| duration | number | `450` | scroll animate duration |
160171
| ease | string | `easeInOutQuad` | animation easing string |
161172
| active | string | `active`| selected className |
162-
| showHeightActive| string / number / array | `50%` | enter distance window top `50%` add `active`, leave same; is array [enter, leave]; |
173+
| showHeightActive| string / number / array | `50%` | enter: the element offset top `50%` add `active`, leave: the element in the window `50%` remove `active`; is array [enter, leave]; |
163174
| toShowHeight | boolean | false | scroll to `showHeightActive` |
164-
| offsetTop | number | 0 | scroll to elem top offset |
175+
| offsetTop | number | 0 | scroll to elem top offset |
165176
| onFocus | func | null | check callback,onFocus({target,to}) |
166177
| onBlur | func | null | blur callback |
178+
| onAsynchronousAddEvent | func | null | Asynchronous add onScroll; callback(function) [refs](http://react-component.github.io/scroll-anim/examples/linkAsynchronous.html) |
167179
| component | string | `div` | - |
168180

169-
### Element
170-
171-
| name | type | default | description |
172-
|-----------|----------------|---------|----------------|
173-
| scrollName | string | null | - |
174-
| component | string | `div` | - |
175-
176-
> Note: if the element is not the above component, you need to location this element; please use the `Element`
177-
178181
### ScrollAnim.scrollScreen.init(vars)
179182
Use: scroll a screen window;
180183

‎examples/link.js

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,21 @@ const ScrollOverPack = ScrollAnim.OverPack;
1414
const EventListener = ScrollAnim.Event;
1515
// ScrollAnim.scrollScreen({scrollInterval: 600});
1616
class Demo extends React.Component {
17-
constructor() {
18-
super(...arguments);
19-
}
20-
2117
componentDidMount() {
2218
// 添加改变窗口事件,可加setTimeout
2319
EventListener.addEventListener('resize.userResize', this.barAnimate.bind(this));
2420
}
2521

26-
onFocus(e) {
22+
onFocus = (e) => {
23+
console.log(e, 'focus');
2724
this.dom = e.target;
2825
this.barAnimate();
2926
}
3027

28+
onBlur = (e) => {
29+
console.log(e, 'blur');
30+
}
31+
3132
barAnimate() {
3233
if (!this.dom) {
3334
return;
@@ -43,30 +44,34 @@ class Demo extends React.Component {
4344
<p>Ant Motion</p>
4445
</div>
4546
<div className="nav-wap">
46-
<Link className="nav-list" location="page0"
47-
onFocus={this.onFocus.bind(this)}
47+
<Link className="nav-list" to="page0" showHeightActive={['50%', '10%']}
48+
onFocus={this.onFocus}
49+
onBlur={this.onBlur}
4850
>
4951
Example
5052
</Link>
51-
<Link className="nav-list" location="page1" offsetTop={158}
52-
onFocus={this.onFocus.bind(this)}
53+
<Link className="nav-list" to="page1" showHeightActive={['10%', '60%']} toShowHeight
54+
onFocus={this.onFocus}
55+
onBlur={this.onBlur}
5356
>
5457
Example2
5558
</Link>
56-
<Link className="nav-list" location="page2"
57-
onFocus={this.onFocus.bind(this)}
59+
<Link className="nav-list" to="page2" showHeightActive={['60%', '50%']} toShowHeight
60+
onFocus={this.onFocus}
61+
onBlur={this.onBlur}
5862
>
5963
Example3
6064
</Link>
61-
<Link className="nav-list" location="page3"
62-
onFocus={this.onFocus.bind(this)}
65+
<Link className="nav-list" to="page3" offsetTop={100}
66+
onFocus={this.onFocus}
67+
onBlur={this.onBlur}
6368
>
6469
Example4
6570
</Link>
6671
<div ref="bar" className="nav-bar" />
6772
</div>
6873
</div>
69-
<Element className="pack-page page0" scrollName="page0">
74+
<Element className="pack-page page0" id="page0">
7075
<QueueAnim className="home-title">
7176
<div className="page-title" key="title">
7277
<p>{_package.name}@{_package.version}</p>
@@ -76,7 +81,7 @@ class Demo extends React.Component {
7681
</div>
7782
</QueueAnim>
7883
</Element>
79-
<ScrollOverPack scrollName="page1" className="page1" hideProps={{ 0: { reverse: true } }}>
84+
<ScrollOverPack id="page1" className="page1" hideProps={{ 0: { reverse: true } }}>
8085
<TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
8186
默认进入与出场
8287
</TweenOne>
@@ -89,7 +94,6 @@ class Demo extends React.Component {
8994
</ScrollOverPack>
9095

9196
<ScrollOverPack
92-
scrollName="page2"
9397
className="pack-page page2"
9498
style={{ backgroundColor: '#0098CE' }}
9599
always={false}
@@ -109,7 +113,6 @@ class Demo extends React.Component {
109113
</ScrollOverPack>
110114

111115
<ScrollOverPack
112-
scrollName="page3"
113116
className="pack-page page3"
114117
style={{ backgroundColor: '#174270' }}
115118
playScale={0.8}

‎examples/linkAsynchronous.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
placeholder

‎examples/linkAsynchronous.js

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
// use jsx to render html, do not modify simple.html
2+
import 'rc-scroll-anim/assets/index.less';
3+
import ScrollAnim from 'rc-scroll-anim';
4+
import React from 'react';
5+
import ReactDOM from 'react-dom';
6+
import QueueAnim from 'rc-queue-anim';
7+
import TweenOne from 'rc-tween-one';
8+
import Animate from 'rc-animate';
9+
const _package = require('../package.json');
10+
11+
const Link = ScrollAnim.Link;
12+
const Element = ScrollAnim.Element;
13+
const ScrollOverPack = ScrollAnim.OverPack;
14+
const EventListener = ScrollAnim.Event;
15+
// ScrollAnim.scrollScreen({scrollInterval: 600});
16+
class Demo extends React.Component {
17+
constructor() {
18+
super(...arguments);
19+
this.state = {
20+
show: false,
21+
};
22+
}
23+
24+
componentDidMount() {
25+
// 添加改变窗口事件,可加setTimeout
26+
EventListener.addEventListener('resize.userResize', this.barAnimate.bind(this));
27+
}
28+
29+
onFocus = (e) => {
30+
this.dom = e.target;
31+
this.barAnimate();
32+
}
33+
34+
onDataLoadEnd = (func) => {
35+
setTimeout(() => {
36+
this.setState({ show: true }, func);
37+
}, 1500);
38+
}
39+
40+
barAnimate() {
41+
if (!this.dom) {
42+
return;
43+
}
44+
const bar = this.refs.bar;
45+
bar.style.left = `${this.dom.getBoundingClientRect().left}px`;
46+
}
47+
48+
render() {
49+
return (<div>
50+
<div className="nav">
51+
<div className="logo">
52+
<p>Ant Motion</p>
53+
</div>
54+
<div className="nav-wap">
55+
<Link className="nav-list" to="page0" showHeightActive={['50%', '10%']}
56+
onFocus={this.onFocus}
57+
onAsynchronousAddEvent={this.onDataLoadEnd}
58+
>
59+
Example
60+
</Link>
61+
<Link className="nav-list" to="page1" showHeightActive={['10%', '60%']} toShowHeight
62+
onFocus={this.onFocus}
63+
onAsynchronousAddEvent={this.onDataLoadEnd}
64+
>
65+
Example2
66+
</Link>
67+
<Link className="nav-list" to="page2" showHeightActive={['60%', '50%']} toShowHeight
68+
onFocus={this.onFocus}
69+
onAsynchronousAddEvent={this.onDataLoadEnd}
70+
>
71+
Example3
72+
</Link>
73+
<Link className="nav-list" to="page3" offsetTop={100}
74+
onFocus={this.onFocus}
75+
onAsynchronousAddEvent={this.onDataLoadEnd}
76+
>
77+
Example4
78+
</Link>
79+
<div ref="bar" className="nav-bar" />
80+
</div>
81+
</div>
82+
{this.state.show && [
83+
<Element className="pack-page page0" id="page0" key="banner">
84+
<QueueAnim className="home-title">
85+
<div className="page-title" key="title">
86+
<p>{_package.name}@{_package.version}</p>
87+
</div>
88+
<div className="page-description" key="c">
89+
<p>The link demo</p>
90+
</div>
91+
</QueueAnim>
92+
</Element>,
93+
<ScrollOverPack id="page1" className="page1" hideProps={{ 0: { reverse: true } }} key="1">
94+
<TweenOne className="tween-one" key="0" animation={{ opacity: 1 }}>
95+
默认进入与出场
96+
</TweenOne>
97+
<QueueAnim key="1">
98+
<div key="0" className="demo"></div>
99+
<div key="1" className="demo" style={{ backgroundColor: '#F38EAD' }}></div>
100+
<div key="2" className="demo"></div>
101+
<div key="3" className="demo"></div>
102+
</QueueAnim>
103+
</ScrollOverPack>,
104+
105+
<ScrollOverPack
106+
className="pack-page page2"
107+
style={{ backgroundColor: '#0098CE' }}
108+
always={false}
109+
id="page2"
110+
hideProps={{ 1: { reverse: true } }}
111+
key="2"
112+
>
113+
<div className="page2-title">只进入一次</div>
114+
<Animate key="0" transitionName="fade" transitionAppear>
115+
<div className="demo2"></div>
116+
</Animate>
117+
<TweenOne
118+
className="demo2"
119+
animation={{ y: 0, opacity: 1 }}
120+
key="1"
121+
style={{ transform: 'translateY(100px)', opacity: 0 }}
122+
/>
123+
</ScrollOverPack>,
124+
125+
<ScrollOverPack
126+
className="pack-page page3"
127+
style={{ backgroundColor: '#174270' }}
128+
playScale={0.8}
129+
id="page3"
130+
hideProps={{ title: { reverse: true }, 1: { reverse: true } }}
131+
key="3"
132+
>
133+
<TweenOne animation={{ opacity: 1 }} style={{ opacity: 0 }} key="title"
134+
className="page2-title"
135+
>
136+
在页面80％时进入
137+
</TweenOne>
138+
<Animate key="0" transitionName="fade" transitionAppear>
139+
<div className="demo"></div>
140+
</Animate>
141+
<TweenOne
142+
className="demo"
143+
animation={{ y: 0, opacity: 1 }}
144+
key="1"
145+
style={{ transform: 'translateY(100px)', opacity: 0 }}
146+
/>
147+
</ScrollOverPack>,
148+
]}
149+
</div>);
150+
}
151+
}
152+
153+
ReactDOM.render(<Demo />, document.getElementById('__react-content'));

‎examples/parallax.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ class Demo extends React.Component {
1818
};
1919
}
2020

21-
onComplete = () => {
22-
console.log('complete');
21+
onComplete = (e) => {
22+
console.log(e);
2323
};
2424

25-
setCss = () => {
25+
setCss = (e) => {
2626
const css = this.state.css;
27-
console.log('start');
27+
console.log(e);
2828
if (this.state.cssNoPosition) {
2929
css.position = 'fixed';
3030
css.top = 0;
@@ -190,15 +190,17 @@ class Demo extends React.Component {
190190
/>
191191
</ScrollParallax>
192192
</div>
193-
<ScrollElement style={{ height: 2000 }} scrollName="Scroll-Pack">
193+
<ScrollElement style={{ height: 2000 }} id="Scroll-Pack">
194194
<ScrollParallax
195195
className="pack-page"
196196
location="Scroll-Pack"
197197
animation={{
198198
backgroundColor: '#0097D0',
199199
playScale: [1, 2],
200-
onStart: this.setCss,
201-
onComplete: this.onComplete,
200+
onStart: () => { this.setCss('start'); },
201+
onCompleteBack: () => { this.setCss('back complete'); },
202+
onComplete: () => { this.onComplete('complete'); },
203+
onStartBack: () => { this.onComplete('back start'); },
202204
}}
203205
style={this.state.css}
204206
>

0 commit comments

Comments
 (0)