https://image.donga.com/donga_v2/js/common/dropAnimate.js?t=20260806

1let slideEvtId = 0;
2let slideUpBeforeEls = new Object();
3let slideDownBeforeEls = new Object();
4let slideDownEndEvts = new Object();
5let slideUpEndEvts = new Object();
6
7const slideUpStartEvtFn = (target, duration) => {
8  target.style.transitionProperty = 'height, margin, padding';
9  target.style.transitionDuration = duration + 'ms';
10  target.style.boxSizing = 'border-box';
11  target.style.overflow = 'hidden';
12  target.style.height = target.offsetHeight + 'px';
13  target.offsetHeight;
14  target.style.height = 0;
15  target.style.paddingTop = 0;
16  target.style.paddingBottom = 0;
17  target.style.marginTop = 0;
18  target.style.marginBottom = 0;
19};
20const slideUpEndEvtFn = (target, id) => {
21  target.style.display = 'none';
22  target.style.removeProperty('height');
23  target.style.removeProperty('padding-top');
24  target.style.removeProperty('padding-bottom');
25  target.style.removeProperty('margin-top');
26  target.style.removeProperty('margin-bottom');
27  target.style.removeProperty('overflow');
28  target.style.removeProperty('transition-duration');
29  target.style.removeProperty('transition-property');
30  target.style.removeProperty('box-sizing');
31};
32const slideDownStartEvtFn = (target, duration) => {
33  // console.log(slideUpBeforeEls, slideUpBeforeEls);
34  let display = window.getComputedStyle(target).display;
35  if (display === 'none') display = 'block';
36  target.style.display = display;
37  let height = target.offsetHeight;
38  target.style.overflow = 'hidden';
39  target.style.height = 0;
40  target.style.paddingTop = 0;
41  target.style.paddingBottom = 0;
42  target.style.marginTop = 0;
43  target.style.marginBottom = 0;
44  target.offsetHeight; // ??????
45  target.style.boxSizing = 'border-box';
46  target.style.transitionProperty = 'height, margin, padding';
47  target.style.transitionDuration = duration + 'ms';
48  target.style.height = height + 'px';
49  target.style.removeProperty('padding-top');
50  target.style.removeProperty('padding-bottom');
51  target.style.removeProperty('margin-top');
52  target.style.removeProperty('margin-bottom');
53};
54const slideDownEndEvtFn = (target, id) => {
55  target.style.removeProperty('height');
56  target.style.removeProperty('overflow');
57  target.style.removeProperty('transition-duration');
58  target.style.removeProperty('transition-property');
59  target.style.removeProperty('box-sizing');
60};
61const slideUp = (target, duration = 500) => {
62  if (!target) return;
63  slideEvtId++;
64  if (Object.keys(slideDownBeforeEls).length > 0) {
65    Object.keys(slideDownBeforeEls).forEach((v) => {
66      if (slideDownBeforeEls[v] === target) {
67        clearTimeout(slideDownEndEvts[v]);
68        slideDownEndEvtFn(slideDownBeforeEls[v], v);
69      }
70    });
71  }
72  setTimeout(() => {
73    slideUpStartEvtFn(target, duration);
74    slideUpBeforeEls[slideEvtId] = target;
75    slideUpEndEvts[slideEvtId] = setTimeout(() => {
76      slideUpEndEvtFn(target, slideEvtId);
77      delete slideUpEndEvts[slideEvtId];
78      delete slideUpBeforeEls[slideEvtId];
79    }, duration);
80  }, 5);
81};
82const slideDown = (target, duration = 500) => {
83  if (!target) return;
84  slideEvtId++;
85  if (Object.keys(slideUpBeforeEls).length > 0) {
86    Object.keys(slideUpBeforeEls).forEach((v) => {
87      if (slideUpBeforeEls[v] === target) {
88        clearTimeout(slideUpEndEvts[v]);
89        slideUpEndEvtFn(slideUpBeforeEls[v], v);
90      }
91    });
92  }
93  target.style.removeProperty('display');
94  setTimeout(() => {
95    slideDownStartEvtFn(target, duration);
96    slideDownBeforeEls[slideEvtId] = target;
97    slideDownEndEvts[slideEvtId] = setTimeout(() => {
98      slideDownEndEvtFn(target, slideEvtId);
99      delete slideDownEndEvts[slideEvtId];
100      delete slideDownBeforeEls[slideEvtId];
101    }, duration);
102  }, 5);
103};
104const slideToggle = (target, duration = 500) => {
105  if (!target) return;
106  if (window.getComputedStyle(target).display === 'none') {
107    return slideDown(target, duration);
108  } else {
109    return slideUp(target, duration);
110  }
111};
112//export { slideUp, slideDown, slideToggle };