|
|
|
@ -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>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|