From 352252f962be2ec9a42bc5f097f1f96ce8990625 Mon Sep 17 00:00:00 2001 From: CaiCai Date: Mon, 18 Jan 2016 23:23:50 +0800 Subject: [PATCH 1/6] update demo for link.js --- assets/index.less | 70 +++++++++++++++++++++++++++++++++++++++++------ examples/link.js | 37 +++++++++++++------------ 2 files changed, 81 insertions(+), 26 deletions(-) diff --git a/assets/index.less b/assets/index.less index 279d17e..f70ed9a 100644 --- a/assets/index.less +++ b/assets/index.less @@ -1,7 +1,15 @@ @zero: 0; +//all css +h1 { + margin: 13px; +} +p { + margin: 0px; +} .pack-page { width: 100%; - height: 800px; + height: 720px; + background-color: #0098CE; } .motion-common() { @@ -67,33 +75,77 @@ } // link css + .nav { position: fixed; - background: rgba(0, 0, 0, .85); + background: #0098CE; color: #fff; width: 100%; - height: 80px; + height: 58px; z-index: 9999; top: 0; & .nav-list { width: 100px; height: 100%; - float: left; - line-height: 80px; + float: right; + line-height: 58px; text-align: center; cursor: pointer; transition: background .45s; &:hover, &.active { - background: #333; + background: #0180AD; } } & .nav-bar { width: 100px; position: absolute; - top: 78px; + top: 58px; left: 0; height: 2px; - background: #ff73fd; - transition: left .3s; + background: #fff; + transition: right .3s; + } +} +[name="page0"]{ + padding-top: 300px; + margin: 0 auto; + width: 100%; + text-align: center; +} +[name="page1"]{ + background-color:#19436E; + height:720px; +} + +[name="tweenone"]{ + width:100%; + opacity: 0; + color:#fff; + font-size:32px; + padding-top: 100px; + text-align: center; + padding-bottom: 50px; +} +[name="demo1"]{ + margin: 0 auto; + width: 600px; + height: 80px; + background-color: #133252; + margin-top: 30px; + border-radius: 4px; +} + + +.page-title{ + & p{ + font-size: 50px; + color: #fff; + } +} +.page-description{ + padding-top: 20px; + & p{ + font-size: 18px; + color: #fff; } } \ No newline at end of file diff --git a/examples/link.js b/examples/link.js index 7513c63..24aaa61 100644 --- a/examples/link.js +++ b/examples/link.js @@ -31,36 +31,39 @@ class Demo extends React.Component { return (
page0 + onFocus={this.onFocus.bind(this)}>Page4 page1 + onFocus={this.onFocus.bind(this)}>Page1 page2 + onFocus={this.onFocus.bind(this)}>Page2 page3 + onFocus={this.onFocus.bind(this)}>Page3
-
我是内容
-
我是内容
-
我是内容
+
+

rc-scroll-anim@0.1.0

+
+
+

A simple demo

+
- - 默认进入与出场 + + 默认进入与出场 + -
示例示例
-
示例示例
-
示例示例
-
示例示例
+
+
+
+
- +
只进入一次
Animate示例示例
@@ -73,7 +76,7 @@ class Demo extends React.Component { - +
在页面80％时进入
Animate示例示例
From abaf0526b97d150339a666960f1b65711b0548a9 Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 19 Jan 2016 12:00:20 +0800 Subject: [PATCH 2/6] update bar resize and float:right --- assets/index.less | 5 ++++- examples/link.js | 48 +++++++++++++++++++++++++++++------------------ 2 files changed, 34 insertions(+), 19 deletions(-) diff --git a/assets/index.less b/assets/index.less index f70ed9a..acdca07 100644 --- a/assets/index.less +++ b/assets/index.less @@ -84,10 +84,13 @@ p { height: 58px; z-index: 9999; top: 0; + & .nav-wap{ + float: right; + } & .nav-list { width: 100px; height: 100%; - float: right; + float: left; line-height: 58px; text-align: center; cursor: pointer; diff --git a/examples/link.js b/examples/link.js index 24aaa61..c25a97e 100644 --- a/examples/link.js +++ b/examples/link.js @@ -11,42 +11,54 @@ import Animate from 'rc-animate'; const Link = ScrollAnim.Link; const Element = ScrollAnim.Element; const ScrollOverPack = ScrollAnim.OverPack; +const EventListener = ScrollAnim.Event; class Demo extends React.Component { constructor() { super(...arguments); } + componentDidMount() { + // 初始设dom为第一个 + this.dom = this.refs.page0; + // 添加改变窗口事件,可加setTimeout + EventListener.addEventListener('resize.userResize', this.barAnimate.bind(this)); + } + onFocus(e) { - const dom = e.target; - this.barAnimate(dom); + this.dom = e.target; + this.barAnimate(); } - barAnimate(dom) { + barAnimate() { const bar = this.refs.bar; - bar.style.left = dom.getBoundingClientRect().left + 'px'; + bar.style.left = this.dom.getBoundingClientRect().left + 'px'; } render() { return (
- Page4 - Page1 - Page2 - Page3 -
+
+ Page0 + Page1 + Page2 + Page3 +
+
-
-

rc-scroll-anim@0.1.0

-
-
+ +
+

rc-scroll-anim@0.1.0

+
+

A simple demo

-
+
+ From 621a68ebc19cbc3ec10d2fe8b2624960c06881fa Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 19 Jan 2016 13:54:05 +0800 Subject: [PATCH 3/6] update demo and api "position" and "to" to location, add all tag scrollName --- README.md | 13 ++++--- assets/index.less | 10 ++--- examples/link.js | 85 ++++++++++++++++++++---------------------- examples/parallax.js | 4 +- src/ScrollElement.jsx | 8 ++-- src/ScrollLink.jsx | 12 +++--- src/ScrollOverPack.jsx | 7 +++- src/ScrollParallax.jsx | 13 +++++-- 8 files changed, 82 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index bde9b1f..dc0703a 100644 --- a/README.md +++ b/README.md @@ -87,8 +87,8 @@ React.render(
nav0 nav1
- 示例 - 示例 + 示例 + 示例
,container); ``` @@ -103,6 +103,7 @@ React.render(
| component | string | `div` | 组件标签 | | playScale | number | `0.5` | 开始播放的屏幕百分比, 0.5 为屏幕中间 | | always | boolean | `true` | 到否重复播放，如为 false 将只进入一遍，不再触发出场效果 | +| scrollName| string | `null` | 需要定位的名称，parallax的 location 或 link 的 location, 都需要以此元素做定位 | #### 子级动画支持 `rc-queue-anim` `rc-animte` `rc-tween-one` @@ -114,8 +115,9 @@ React.render(
| name | type | default | description | |-----------|----------------|---------|----------------| | vars | object / array | `null` | 组件动效数据 | -| position | string | `null` | 定位,`Element`的 name 值，必需是唯一的| +| location | string | `null` | 定位,`Element`的 name 值，必需是唯一的| | always | boolean | `true` | 同上 | +| scrollName| string | `null` | 需要定位的名称，parallax的 location 或 link 的 location, 都需要以此元素做定位 | | component | string | `div` | 同上 | #### vars = { } @@ -132,7 +134,7 @@ React.render(
### Link | name | type | default | description | |-----------|----------------|---------|----------------| -| to | string | `null` | 必需; 指定元素到达顶部; `Element` 的 name 值, 元素必需是唯一的 | +| location | string | `null` | 必需; 指定元素到达顶部; `Element` 的 name 值, 元素必需是唯一的 | | duration | number | `450` | 点击滚动动画的时间 | | ease | string | `easeInOutQuad` | 动画缓动 | | active | string | `active`| 选中时的样式 | @@ -146,9 +148,10 @@ React.render(
| name | type | default | description | |-----------|----------------|---------|----------------| -| name | string | null | 需要定位的名称，parallax的 position 或 link 的 to, 都需要以此元素做定位 | +| scrollName | string | null | 需要定位的名称，parallax的 location 或 link 的 location, 都需要以此元素做定位 | | component | string | `div` | 同上 | +> 注: 如果元素不是以上组件时，需要定位到此元素上时，请用 `Element` ### Event ```jsx diff --git a/assets/index.less b/assets/index.less index acdca07..8fe6548 100644 --- a/assets/index.less +++ b/assets/index.less @@ -106,21 +106,21 @@ p { left: 0; height: 2px; background: #fff; - transition: right .3s; + transition: left .3s; } } -[name="page0"]{ +.page0{ padding-top: 300px; margin: 0 auto; width: 100%; text-align: center; } -[name="page1"]{ +.page1{ background-color:#19436E; height:720px; } -[name="tweenone"]{ +.tween-one{ width:100%; opacity: 0; color:#fff; @@ -129,7 +129,7 @@ p { text-align: center; padding-bottom: 50px; } -[name="demo1"]{ +.demo{ margin: 0 auto; width: 600px; height: 80px; diff --git a/examples/link.js b/examples/link.js index c25a97e..809fd33 100644 --- a/examples/link.js +++ b/examples/link.js @@ -19,8 +19,6 @@ class Demo extends React.Component { } componentDidMount() { - // 初始设dom为第一个 - this.dom = this.refs.page0; // 添加改变窗口事件,可加setTimeout EventListener.addEventListener('resize.userResize', this.barAnimate.bind(this)); } @@ -31,6 +29,9 @@ class Demo extends React.Component { } barAnimate() { + if (!this.dom) { + return; + } const bar = this.refs.bar; bar.style.left = this.dom.getBoundingClientRect().left + 'px'; } @@ -39,18 +40,18 @@ class Demo extends React.Component { return (
- Page0 - Page1 - Page2 - Page3
- +

rc-scroll-anim@0.1.0

@@ -60,45 +61,41 @@ class Demo extends React.Component {
- - - 默认进入与出场 - - -
-
-
-
- - - + + 默认进入与出场 + + +
+
+
+
+ + - - -
只进入一次
- -
Animate示例示例
- - - 单元素用例 - - - + +
只进入一次
+ +
Animate示例示例
+ + + 单元素用例 + + - - -
在页面80％时进入
- -
Animate示例示例
- - - 单元素用例 - - - + +
在页面80％时进入
+ +
Animate示例示例
+ + + 单元素用例 + +
); } } diff --git a/examples/parallax.js b/examples/parallax.js index 23de8d0..45f1a50 100644 --- a/examples/parallax.js +++ b/examples/parallax.js @@ -65,11 +65,11 @@ class Demo extends React.Component {
示例示例 diff --git a/src/ScrollElement.jsx b/src/ScrollElement.jsx index 7e83927..d14ec1a 100644 --- a/src/ScrollElement.jsx +++ b/src/ScrollElement.jsx @@ -5,11 +5,13 @@ import mapped from './Mapped'; class ScrollElement extends React.Component { componentDidMount() { const domNode = ReactDOM.findDOMNode(this); - mapped.register(this.props.name, domNode); + if (this.props.scrollName) { + mapped.register(this.props.scrollName, domNode); + } } componentWillUnmount() { - mapped.unregister(this.props.name); + mapped.unregister(this.props.scrollName); } render() { @@ -19,7 +21,7 @@ class ScrollElement extends React.Component { const funcOrString = React.PropTypes.oneOfType([React.PropTypes.func, React.PropTypes.string]); ScrollElement.propTypes = { component: funcOrString, - name: React.PropTypes.string, + scrollName: React.PropTypes.string, }; ScrollElement.defaultProps = { diff --git a/src/ScrollLink.jsx b/src/ScrollLink.jsx index b14e6f5..716ae83 100644 --- a/src/ScrollLink.jsx +++ b/src/ScrollLink.jsx @@ -48,7 +48,7 @@ class ScrollLink extends React.Component { onClick(e) { e.preventDefault(); const docRect = document.documentElement.getBoundingClientRect(); - const elementDom = mapped.get(this.props.to); + const elementDom = mapped.get(this.props.location); const elementRect = elementDom.getBoundingClientRect(); this.scrollTop = window.pageYOffset; const toTop = Math.round(elementRect.top) - Math.round(docRect.top); @@ -80,9 +80,9 @@ class ScrollLink extends React.Component { scrollEventListener() { const docRect = document.documentElement.getBoundingClientRect(); - const elementDom = mapped.get(this.props.to); + const elementDom = mapped.get(this.props.location); if (!elementDom) { - throw new Error('"to" is null'); + throw new Error('"location" is null'); } const elementRect = elementDom.getBoundingClientRect(); const elementClientHeight = elementDom.clientHeight; @@ -95,7 +95,7 @@ class ScrollLink extends React.Component { if (!this.props.onFocus.only) { const obj = { target: this.dom, - to: this.props.to, + location: this.props.location, }; this.props.onFocus.call(this, obj); this.props.onFocus.only = true; @@ -107,7 +107,7 @@ class ScrollLink extends React.Component { if (this.props.onFocus.only) { const obj = { target: this.dom, - to: this.props.to, + location: this.props.location, }; this.props.onBlur.call(this, obj); } @@ -143,7 +143,7 @@ ScrollLink.propTypes = { style: objectOrArray, duration: React.PropTypes.number, active: React.PropTypes.string, - to: React.PropTypes.string, + location: React.PropTypes.string, showHeightActive: stringOrNumberOrArray, toShowHeight: React.PropTypes.bool, ease: React.PropTypes.string, diff --git a/src/ScrollOverPack.jsx b/src/ScrollOverPack.jsx index 6cb9778..ca2bb68 100644 --- a/src/ScrollOverPack.jsx +++ b/src/ScrollOverPack.jsx @@ -1,6 +1,7 @@ import React, { createElement } from 'react'; import ReactDom from 'react-dom'; import EventListener from './EventDispatcher'; +import mapped from './Mapped'; function noop() { } @@ -31,7 +32,9 @@ class ScrollOverPack extends React.Component { componentDidMount() { this.dom = ReactDom.findDOMNode(this); this.computedStyle = document.defaultView.getComputedStyle(this.dom); - + if (this.props.scrollName) { + mapped.register(this.props.scrollName, this.dom); + } const date = Date.now(); const length = EventListener._listeners.scroll ? EventListener._listeners.scroll.length : 0; this.eventType = 'scroll.scrollEvent' + date + length; @@ -40,6 +43,7 @@ class ScrollOverPack extends React.Component { } componentWillUnmount() { + mapped.unregister(this.props.scrollName); EventListener.removeEventListener(this.eventType, this.scrollEventListener); } @@ -108,6 +112,7 @@ ScrollOverPack.propTypes = { children: objectOrArray, className: React.PropTypes.string, style: objectOrArray, + scrollName: React.PropTypes.string, }; ScrollOverPack.defaultProps = { diff --git a/src/ScrollParallax.jsx b/src/ScrollParallax.jsx index b496b9c..70057ef 100644 --- a/src/ScrollParallax.jsx +++ b/src/ScrollParallax.jsx @@ -56,6 +56,9 @@ class ScrollParallax extends React.Component { componentDidMount() { this.dom = ReactDom.findDOMNode(this); + if (this.props.scrollName) { + mapped.register(this.props.scrollName, this.dom); + } this.computedStyle = document.defaultView.getComputedStyle(this.dom); this.scrollTop = window.pageYOffset; @@ -64,7 +67,7 @@ class ScrollParallax extends React.Component { this.eventType = 'scroll.scrollEvent' + date + length; EventListener.addEventListener(this.eventType, this.scrollEventListener); // 第一次进入; - setTimeout(()=>{ + setTimeout(()=> { this.scrollEventListener(); }); } @@ -98,6 +101,7 @@ class ScrollParallax extends React.Component { } componentWillUnmount() { + mapped.unregister(this.props.scrollName); EventListener.removeEventListener(this.eventType, this.scrollEventListener); } @@ -224,9 +228,9 @@ class ScrollParallax extends React.Component { const playHeight = clientHeight * item.initScale; // position定位； - const dom = this.props.position ? mapped.get(this.props.position) : this.dom; + const dom = this.props.location ? mapped.get(this.props.location) : this.dom; if (!dom) { - throw new Error('"position" is null'); + throw new Error('"location" is null'); } const noPosition = dom === this.dom; // 屏幕缩放时的响应，所以放回这里，offsetTop 与 marginTop 有关联，所以减掉； @@ -352,10 +356,11 @@ ScrollParallax.propTypes = { component: React.PropTypes.string, vars: objectOrArray, always: React.PropTypes.bool, - position: React.PropTypes.string, + location: React.PropTypes.string, children: childPropTypes, className: React.PropTypes.string, style: objectOrArray, + scrollName: React.PropTypes.string, }; ScrollParallax.defaultProps = { From 50f2f8f23433c8210cbb681d88d2f5edbeb3c23f Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 19 Jan 2016 13:55:26 +0800 Subject: [PATCH 4/6] update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 27c947c..c5a18c3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-scroll-anim", - "version": "0.1.0", + "version": "0.1.1", "description": "scroll-anim anim component for react", "keywords": [ "react", From c206247b79f6e5aa2592d7b6fd07cd310df34c38 Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 19 Jan 2016 13:58:13 +0800 Subject: [PATCH 5/6] update spec link --- tests/link.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/link.spec.js b/tests/link.spec.js index 8a8aa62..c1301f1 100644 --- a/tests/link.spec.js +++ b/tests/link.spec.js @@ -34,10 +34,10 @@ describe('rc-scroll-anim', function() { onFocus={this.onFocus.bind(this)}>page1
- + 示例 - + 示例
); From 3cd0480a72645df0800bdaf844efbfaa10e26b6c Mon Sep 17 00:00:00 2001 From: jljsj Date: Tue, 19 Jan 2016 13:58:54 +0800 Subject: [PATCH 6/6] update spec link --- tests/link.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tests/link.spec.js b/tests/link.spec.js index c1301f1..aaa3b81 100644 --- a/tests/link.spec.js +++ b/tests/link.spec.js @@ -28,9 +28,9 @@ describe('rc-scroll-anim', function() { render() { return (
- page0 - page1