mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

feat: add back to top animation (#3021)

Browse Source 
* add back to top animation

* update currentScrollTop

* use date now
This commit is contained in:
jiang 2016-09-13 17:10:08 +08:00 committed by Benjy Cui
parent 8db2b79505
commit 656ab0e3f3
1 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/back-top/index.tsx
View File

@ -5,6 +5,30 @@ import addEventListener from 'rc-util/lib/Dom/addEventListener';
import classNames from 'classnames';
import omit from 'omit.js';
const reqAnimFrame = (() => {
if (window.requestAnimationFrame) {
return window.requestAnimationFrame;
}
const a = ['moz', 'ms', 'webkit'];
const raf = a.filter(key => `${key}RequestAnimationFrame` in window);
return raf[0] ? window[`${raf[0]}RequestAnimationFrame`] :
((callback) => window.setTimeout(callback, 1000 / 60));
})();
const currentScrollTop = () => {
return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
};
const easeInOutCubic = (t, b, c, d) => {
const cc = c - b;
t /= d / 2;
if (t < 1) {
return cc / 2 * t * t * t + b;
} else {
return cc / 2 * ((t -= 2) * t * t + 2) + b;
}
};
function getScroll(target, top) {
if (typeof window === 'undefined') {
return 0;
@ -52,10 +76,17 @@ export default class BackTop extends React.Component<BackTopProps, any> {
}
scrollToTop = (e) => {
if (e) {
e.preventDefault();
}
this.setScrollTop(0);
const scrollTop = currentScrollTop();
const startTime = Date.now();
const frameFunc = () => {
const timestamp = Date.now();
const time = timestamp - startTime;
this.setScrollTop(easeInOutCubic(time, scrollTop, 0, 450));
if (time < 450) {
reqAnimFrame(frameFunc);
}
};
reqAnimFrame(frameFunc);
this.props.onClick(e);
}