|
|
@ -92,9 +92,9 @@ module.exports = function() { |
|
|
|
return ( |
|
|
|
<ScrollOverPack scrollName="page1" className="content-wrapper" playScale={1} replay> |
|
|
|
<TweenOne key="image" className="image1 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}} |
|
|
|
style={{transform: 'translateX(-100px)', opacity: 0}} scrollHideProps={{type: 'reverse'}}/> |
|
|
|
style={{transform: 'translateX(-100px)', opacity: 0}} hideProps={{type: 'reverse'}}/> |
|
|
|
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse |
|
|
|
scrollHideProps={{child: null}}> |
|
|
|
hideProps={{child: null}}> |
|
|
|
<h2 key="h2">最佳实践</h2> |
|
|
|
<p key="p" style={{maxWidth: 310}}>近一年的中后台设计实践,积累了大量的优秀案例。</p> |
|
|
|
<div key="button"><Button type="primary" size="large" |
|
|
@ -114,7 +114,7 @@ module.exports = function() { |
|
|
|
<ScrollOverPack scrollName="page2" className="content-wrapper" playScale={1} replay> |
|
|
|
<QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom' |
|
|
|
leaveReverse |
|
|
|
scrollHideProps={{child: null}}> |
|
|
|
hideProps={{child: null}}> |
|
|
|
<h2 key="h2">设计模式</h2> |
|
|
|
<p key="p" style={{maxWidth: 260}}>总结中后台设计中反复出现的问题,并提供相应的解决方案。</p> |
|
|
|
<div key="button"><Button type="primary" size="large" |
|
|
@ -123,7 +123,7 @@ module.exports = function() { |
|
|
|
</div> |
|
|
|
</QueueAnim> |
|
|
|
<TweenOne key="image" className="image2 image-wrapper" vars={{x: 0, opacity: 1, delay: 300, duration: 550}} |
|
|
|
style={{transform: 'translateX(100px)', opacity: 0}} scrollHideProps={{type: 'reverse'}}/> |
|
|
|
style={{transform: 'translateX(100px)', opacity: 0}} hideProps={{type: 'reverse'}}/> |
|
|
|
</ScrollOverPack> |
|
|
|
); |
|
|
|
} |
|
|
@ -136,9 +136,9 @@ module.exports = function() { |
|
|
|
return ( |
|
|
|
<ScrollOverPack scrollName="page3" className="content-wrapper" playScale={1} replay> |
|
|
|
<TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}} |
|
|
|
style={{transform: 'translateX(-100px)', opacity: 0}} scrollHideProps={{type: 'reverse'}}/> |
|
|
|
style={{transform: 'translateX(-100px)', opacity: 0}} hideProps={{type: 'reverse'}}/> |
|
|
|
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}} |
|
|
|
scrollHideProps={{child: null}}> |
|
|
|
hideProps={{child: null}}> |
|
|
|
<h2 key="h2">丰富的基础组件</h2> |
|
|
|
<p key="p" style={{maxWidth: 280}}>丰富、灵活、实用的基础组件,为业务产品提供强有力的设计支持。</p> |
|
|
|
<div key="button"><Button type="primary" size="large" |
|
|
@ -157,12 +157,12 @@ module.exports = function() { |
|
|
|
return ( |
|
|
|
<ScrollOverPack scrollName="page4" className="content-wrapper" playScale={1}> |
|
|
|
<QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom" |
|
|
|
scrollHideProps={{child: null}}> |
|
|
|
hideProps={{child: null}}> |
|
|
|
<h2 key="h2">微小·确定·幸福</h2> |
|
|
|
<p key="p">这是一套致力于提升『用户』和『设计者』使用体验的中后台设计语言。</p> |
|
|
|
</QueueAnim> |
|
|
|
<TweenOne key="image" className="image4 bottom-wrapper" vars={{y: 0, opacity: 1, duration: 550, delay: 550}} |
|
|
|
style={{transform: 'translateY(50px)', opacity: 0}} scrollHideProps={{type: 'reverse'}}/> |
|
|
|
style={{transform: 'translateY(50px)', opacity: 0}} hideProps={{type: 'reverse'}}/> |
|
|
|
</ScrollOverPack> |
|
|
|
); |
|
|
|
} |
|
|
|