mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 23:46:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

use css animation for perf

Browse Source
This commit is contained in:
afc163 2016-05-17 00:01:25 +08:00
parent 137f9071ac
commit abfbcee034
3 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
site/common/styles/common.less
View File

@ -262,6 +262,18 @@ a {
}
}
@keyframes upDownMove {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
100% {
transform: translateY(0);
}
}
@keyframes pageEnter {
from {
opacity: 0;

5
site/component/Home/Banner.jsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import { Link } from 'react-router';
import ScrollElement from 'rc-scroll-anim/lib/ScrollElement';
import TweenOne from 'rc-tween-one';
import GitHubButton from 'react-github-button';
import 'react-github-button/assets/style.css';
import { Icon } from 'antd';
@ -33,9 +32,7 @@ export default class Banner extends React.Component {
<GitHubButton key="github-button" type="stargazers"
namespace="ant-design" repo="ant-design" />
</QueueAnim>
<TweenOne className="down" animation={{ y: 10, duration: 800, yoyo: true, repeat: -1 }}>
<Icon type="down" />
</TweenOne>
<Icon type="down" className="down" />
</ScrollElement>
</section>
);

3
site/component/Home/index.jsx
View File

@ -85,6 +85,9 @@ export default class Home extends React.Component {
#footer a {
color: #eee;
}
.down {
animation: upDownMove 1.2s ease-in-out infinite;
}
`;
}