前端抽屉滑动效果,简版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
export default {
toggle: function(o, height, times) {
if (!o.tid) o.tid = "_" + Math.random() * 100;
if (!window.toggler) window.toggler = {};
if (!window.toggler[o.tid]) {
window.toggler[o.tid] = {
obj: o,
maxHeight: o.offsetHeight,
minHeight: height, //高度
timer: null,
action: 1
};
}
o.style.height = o.offsetHeight + "px";
if (window.toggler[o.tid].timer) clearTimeout(window.toggler[o.tid].timer);
window.toggler[o.tid].action *= -1;
window.toggler[o.tid].timer = setTimeout(() => {
this.anim(o.tid, times);
}, times); //循环时间
},
anim: function(id, times) {
var t = window.toggler[id];
var o = window.toggler[id].obj;
if (t.action < 0) {
if (o.offsetHeight <= t.minHeight) {
clearTimeout(t.timer);
return;
}
} else {
if (o.offsetHeight >= t.maxHeight) {
clearTimeout(t.timer);
return;
}
}
o.style.height = parseInt(o.style.height, 10) + t.action * 8 + "px"; //8是每次变化的量
window.toggler[id].timer = setTimeout(() => {
this.anim(id, times);
}, times); //循环时间
}
};

1
2
3
 Slideutlis.toggle(
document.getElementsByClassName("className")[0].parentNode,43,10//element,height,speed
);