fix home animation (#1381)

This commit is contained in:
jiang
2016-04-11 16:06:20 +08:00
committed by afc163
parent be700df612
commit 22cc6165ac
6 changed files with 11 additions and 11 deletions
+2 -2
View File
@@ -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",
+1 -1
View File
@@ -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>
+2 -2
View File
@@ -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>
+2 -2
View File
@@ -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>
);
}
+2 -2
View File
@@ -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>
+2 -2
View File
@@ -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>
);
}