https://www.izumi.jp/themes/custom/izumi/js/common/index.js?tm8ss1

1// 要素をスライドダウン表示
2export function slideDown(el, duration = '200ms') {
3  return new Promise((resolve) => {
4    el.style.height = '0';
5    el.style.opacity = '0';
6    el.style.display = 'block';
7
8    requestAnimationFrame(() => {
9      el.style.transition = `all ${duration}`;
10      el.style.height = el.scrollHeight + 'px';
11      el.style.opacity = '1';
12
13      el.addEventListener('transitionend', function handler() {
14        el.style.transition = 'none';
15        el.style.height = 'auto';
16        el.removeEventListener('transitionend', handler);
17        resolve();
18      }, { once: true });
19    });
20  });
21}
22
23
24// 要素をスライドアップして非表示にする
25export function slideUp(el, duration = '200ms') {
26  return new Promise((resolve) => {
27    el.style.height = el.scrollHeight + 'px';
28    requestAnimationFrame(() => {
29      el.style.transition = `all ${duration}`;
30      el.style.height = '0';
31      el.style.opacity = '0';
32
33      el.addEventListener('transitionend', function handler() {
34        el.style.transition = 'none';
35        el.style.display = 'none';
36        el.removeEventListener('transitionend', handler);
37        resolve();
38      }, { once: true });
39    });
40  });
41}
42
43
44// 要素をスライドで表示/非表示を切り替える
45export function slideToggle(el, duration = '200ms', flag = true) {
46  return flag ? slideDown(el, duration) : slideUp(el, duration);
47}