mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-09 04:46:52 +10:00
fix home animation (#1381)
This commit is contained in:
+2
-2
@@ -109,8 +109,8 @@
|
||||
"pre-commit": "1.x",
|
||||
"querystring": "^0.2.0",
|
||||
"ramda": "^0.20.1",
|
||||
"rc-scroll-anim": "^0.1.7",
|
||||
"rc-tween-one": "^0.1.8",
|
||||
"rc-scroll-anim": "0.2.x",
|
||||
"rc-tween-one": "0.2.x",
|
||||
"react": "^15.0.0",
|
||||
"react-addons-test-utils": "^15.0.0",
|
||||
"react-copy-to-clipboard": "^4.0.1",
|
||||
|
||||
@@ -33,7 +33,7 @@ export default class Banner extends React.Component {
|
||||
<GitHubButton key="github-button" type="stargazers"
|
||||
namespace="ant-design" repo="ant-design" />
|
||||
</QueueAnim>
|
||||
<TweenOne className="down" vars={[{ opacity: 1 }, { y: 10, duration: 800, yoyo: true, repeat: -1 }]}>
|
||||
<TweenOne className="down" animation={[{ opacity: 1 }, { y: 10, duration: 800, yoyo: true, repeat: -1 }]}>
|
||||
<Icon type="down" />
|
||||
</TweenOne>
|
||||
</ScrollElement>
|
||||
|
||||
@@ -21,8 +21,8 @@ export default class Page1 extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ScrollOverPack scrollName="page1" className="content-wrapper page" playScale={1} replay scrollEvent={onScrollEvent}>
|
||||
<TweenOne key="image" className="image1 image-wrapper" vars={{ x: 0, opacity: 1, duration: 550 }}
|
||||
style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ type: 'reverse' }} />
|
||||
<TweenOne key="image" className="image1 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
|
||||
style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }} />
|
||||
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
|
||||
hideProps={{ child: null }}>
|
||||
<h2 key="h2">最佳实践</h2>
|
||||
|
||||
@@ -23,8 +23,8 @@ export default class Page2 extends React.Component {
|
||||
</Link>
|
||||
</div>
|
||||
</QueueAnim>
|
||||
<TweenOne key="image" className="image2 image-wrapper" vars={{ x: 0, opacity: 1, delay: 300, duration: 550 }}
|
||||
style={{ transform: 'translateX(100px)', opacity: 0 }} hideProps={{ type: 'reverse' }} />
|
||||
<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 }} />
|
||||
</ScrollOverPack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,8 +9,8 @@ export default class Page3 extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ScrollOverPack scrollName="page3" className="content-wrapper page" playScale={1} replay>
|
||||
<TweenOne key="image" className="image3 image-wrapper" vars={{ x: 0, opacity: 1, duration: 550 }}
|
||||
style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ type: 'reverse' }} />
|
||||
<TweenOne key="image" className="image3 image-wrapper" animation={{ x: 0, opacity: 1, duration: 550 }}
|
||||
style={{ transform: 'translateX(-100px)', opacity: 0 }} hideProps={{ reverse: true }} />
|
||||
<QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{ top: '40%' }}
|
||||
hideProps={{ child: null }}>
|
||||
<h2 key="h2">丰富的基础组件</h2>
|
||||
|
||||
@@ -12,8 +12,8 @@ export default class Page4 extends React.Component {
|
||||
<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 }} hideProps={{ type: 'reverse' }} />
|
||||
<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 }} />
|
||||
</ScrollOverPack>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user