mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 32 Packages Projects Releases Wiki Activity

update rc-scroll-anim (#2322)

Browse Source
This commit is contained in:
jiang 2016-07-08 17:33:25 +08:00 committed by 偏右
parent 45db4cab50
commit 2a64384852
5 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -106,7 +106,7 @@
"pre-commit": "1.x",
"querystring": "^0.2.0",
"ramda": "^0.21.0",
"rc-scroll-anim": "~0.2.11",
"rc-scroll-anim": "~0.3.0",
"rc-tween-one": "~0.6.20",
"react": "^15.0.0",
"react-addons-test-utils": "^15.0.0",

14
site/theme/template/Home/Page1.jsx
View File

@ -19,13 +19,15 @@ function onScrollEvent(e) {
export default function Page1() {
return (
<ScrollOverPack scrollName="page1" className="content-wrapper page" playScale={1} replay scrollEvent={onScrollEvent}>
<TweenOne key="image" className="image1 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }}
<ScrollOverPack scrollName="page1" className="content-wrapper page"
playScale={1} replay scrollEvent={onScrollEvent}
hideProps={{ image: { reverse: true } }}
>
<TweenOne key="image" className="image1 image-wrapper"
animation={{ x: 0, opacity: 1, duration: 550 }}
style={{ transform: 'translateX(-100px)', opacity: 0 }}
/>
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
hideProps={{ child: null }}
>
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse>
<h2 key="h2">最佳实践</h2>
<p key="p" style={{ maxWidth: 310 }}>近一年的中后台设计实践，积累了大量的优秀案例。</p>
<div key="button">

15
site/theme/template/Home/Page2.jsx
View File

@ -7,10 +7,12 @@ import QueueAnim from 'rc-queue-anim';
export default function Page2() {
return (
<ScrollOverPack scrollName="page2" className="content-wrapper page" playScale={1} replay>
<QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type="bottom"
leaveReverse
hideProps={{ child: null }}
<ScrollOverPack scrollName="page2"
className="content-wrapper page" playScale={1} replay
hideProps={{ image: { reverse: true } }}
>
<QueueAnim className="text-wrapper left-text" delay={300} key="text"
duration={550} type="bottom" leaveReverse
>
<h2 key="h2">设计模式</h2>
<p key="p" style={{ maxWidth: 260 }}>总结中后台设计中反复出现的问题，并提供相应的解决方案。</p>
@ -23,8 +25,9 @@ export default function Page2() {
</Link>
</div>
</QueueAnim>
<TweenOne key="image" className="image2 image-wrapper" animation={{ x: 0, opacity: 1, delay: 300, duration: 550 }}
style={{ transform: 'translateX(100px)', opacity: 0 }} hideProps={{ reverse: true }}
<TweenOne key="image" className="image2 image-wrapper"
animation={{ x: 0, opacity: 1, delay: 300, duration: 550 }}
style={{ transform: 'translateX(100px)', opacity: 0 }}
/>
</ScrollOverPack>
);

13
site/theme/template/Home/Page3.jsx
View File

@ -7,12 +7,15 @@ import QueueAnim from 'rc-queue-anim';
export default function Page3() {
return (
<ScrollOverPack scrollName="page3" className="content-wrapper page" playScale={1} replay>
<TweenOne key="image" className="image3 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }}
<ScrollOverPack scrollName="page3" className="content-wrapper page" playScale={1} replay
hideProps={{ image: { reverse: true } }}
>
<TweenOne key="image" className="image3 image-wrapper"
animation={{ x: 0, opacity: 1, duration: 550 }}
style={{ transform: 'translateX(-100px)', opacity: 0 }}
/>
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{ top: '40%' }}
hideProps={{ child: null }}
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550}
leaveReverse style={{ top: '40%' }}
>
<h2 key="h2">丰富的基础组件</h2>
<p key="p" style={{ maxWidth: 280 }}>丰富、灵活、实用的基础组件，为业务产品提供强有力的设计支持。</p>

10
site/theme/template/Home/Page4.jsx
View File

@ -5,15 +5,17 @@ import QueueAnim from 'rc-queue-anim';
export default function Page4() {
return (
<ScrollOverPack scrollName="page4" className="content-wrapper page" playScale={1}>
<QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom"
hideProps={{ child: null }}
<ScrollOverPack scrollName="page4" className="content-wrapper page"
playScale={1} hideProps={{ image: { reverse: true } }}
>
<QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550}
leaveReverse type="bottom"
>
<h2 key="h2">微小·确定·幸福</h2>
<p key="p">这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。</p>
</QueueAnim>
<TweenOne key="image" className="image4 bottom-wrapper" animation={{ y: 0, opacity: 1, duration: 550, delay: 550 }}
style={{ transform: 'translateY(50px)', opacity: 0 }} hideProps={{ reverse: true }}
style={{ transform: 'translateY(50px)', opacity: 0 }}
/>
</ScrollOverPack>
);