❝不要说不可能
没有什么不可能
❞
前言
升上去没？
如果没有，试试Backtop
你也可以一飞冲天！
1 Backtop
动画 rAF
代码片段
const rAF = window.requestAnimationFrame
|| (func => setTimeout(func, 16));
技巧解析
❝何为动画？
❞
在一段时间里连续运动，也就是每一秒都动那么一下下
所以，setInterval不正好合适吗
话虽如此，可浏览器并不会以固定的秒数更新页面，所以会导致失帧
那么，能不能在浏览器每次刷新的时候才动那么一下呢？
requestAnimationFrame就是为此而生的
很不是很鸡冻啊，O(∩_∩)O哈哈~
前端requestAnimationFrame概述
小工具
scrollToTop
代码片段
/*
* @ {desc} 滚动到顶部
* @ {params} el-需要滚动容器，默认document.documentElement
* @ {example}
*/
scrollToTop() {
const cubic = value => Math.pow(value, 3);
const easeInOutCubic = value => value < 0.5
? cubic(value * 2) / 2
: 1 - cubic((1 - value) * 2) / 2;
const el = this.el;
const beginTime = Date.now();
const beginValue = el.scrollTop;
const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
const frameFunc = () => {
const progress = (Date.now() - beginTime) / 500;
if (progress < 1) {
el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
rAF(frameFunc);
} else {
el.scrollTop = 0;
}
};
rAF(frameFunc);
}
「我甚至连Ta的一张照片都没有」
「Ta却藏在我的记忆最深处」
参考链接
往期回顾
- 跟随Element学习Vue小技巧(1)——Layout
- 跟随Element学习Vue小技巧(2)——Container
- 跟随Element学习Vue小技巧(7)——Button
- 跟随Element学习Vue小技巧(8)——Link
- 跟随Element学习Vue小技巧(9)——Radio
- 跟随Element学习Vue小技巧(10)——Checkbox
- 跟随Element学习Vue小技巧(11)——Input
- 跟随Element学习Vue小技巧(12)——InputNumber
- 跟随Element学习Vue小技巧(13)——Select
- 跟随Element学习Vue小技巧(14)——Cascader
- 跟随Element学习Vue小技巧(15)——Switch
- 跟随Element学习Vue小技巧(16)——Slider
- 跟随Element学习Vue小技巧(17)——TimePicker
- 跟随Element学习Vue小技巧(18)——DatePicker
- 跟随Element学习Vue小技巧(20)——Upload
- 跟随Element学习Vue小技巧(21)——Rate
- 跟随Element学习Vue小技巧(23)——Transfer
- 跟随Element学习Vue小技巧(24)——Form
- 跟随Element学习Vue小技巧(25)——Table
- 跟随Element学习Vue小技巧(26)——Tag
- 跟随Element学习Vue小技巧(27)——Progress
- 跟随Element学习Vue小技巧(28)——Tree
- 跟随Element学习Vue小技巧(29)——Pagination
- 跟随Element学习Vue小技巧(31)——Avatar
- 跟随Element学习Vue小技巧(33)——Loading
- 跟随Element学习Vue小技巧(34)——Message
- 跟随Element学习Vue小技巧(36)——Notification
- 跟随Element学习Vue小技巧(37)——Menu
- 跟随Element学习Vue小技巧(38)——Tabs
- 跟随Element学习Vue小技巧(39)——Breadcrumb
- 跟随Element学习Vue小技巧(41)——Dropdown
- 跟随Element学习Vue小技巧(42)——Steps
- 跟随Element学习Vue小技巧(43)——Dialog
- 跟随Element学习Vue小技巧(44)——Tooltip
- 跟随Element学习Vue小技巧(45)——Popover
- 跟随Element学习Vue小技巧(48)——Carousel
- 跟随Element学习Vue小技巧(49)——Collapse
- 跟随Element学习Vue小技巧(50)——Timeline
- 跟随Element学习Vue小技巧(52)——Calendar
- 跟随Element学习Vue小技巧(54)——Image
