JavaScriptで書かれているslideUp/slideDownのコードを理解したい

Question

ソースコードを読み解きたい

jQueryのslideUp/slideDownを生のJavaScriptで書かれている記事があるのですが、一部理解できない箇所があったので、ベテランの方ご教授いただけないでしょうか。

該当記事↓
https://web-dev.tech/front-end/javascript/slide-methods-on-vanilla-javascript/#index_id6

slideUpのソースコード

const slideUp = (el, duration = 300) => {
  el.style.height = el.offsetHeight + "px";
  el.offsetHeight; ※これをこの位置で読み取る必要性
  el.style.transitionProperty = "height, margin, padding";
  el.style.transitionDuration = duration + "ms";
  el.style.transitionTimingFunction = "ease";
  el.style.overflow = "hidden";
  el.style.height = 0;
  el.style.paddingTop = 0;
  el.style.paddingBottom = 0;
  el.style.marginTop = 0;
  el.style.marginBottom = 0;
  setTimeout(() => {
    el.style.display = "none";
    el.style.removeProperty("height");
    el.style.removeProperty("padding-top");
    el.style.removeProperty("padding-bottom");
    el.style.removeProperty("margin-top");
    el.style.removeProperty("margin-bottom");
    el.style.removeProperty("overflow");
    el.style.removeProperty("transition-duration");
    el.style.removeProperty("transition-property");
    el.style.removeProperty("transition-timing-function");
  }, duration);
};

slideDownのソースコード

const slideDown = (el, duration = 300) => {
  el.style.removeProperty("display");
  let display = window.getComputedStyle(el).display;
  if (display === "none") {
    display = "block";
  }
  el.style.display = display;
  let height = el.offsetHeight;
  el.style.height = 0;
  el.style.paddingTop = 0;
  el.style.paddingBottom = 0;
  el.style.marginTop = 0;
  el.style.marginBottom = 0;
  el.offsetHeight;　※これをこの位置で読み取る必要性
  el.style.transitionProperty = "height, margin, padding";
  el.style.transitionDuration = duration + "ms";
  el.style.transitionTimingFunction = "ease";
  el.style.overflow = "hidden";
  el.style.height = height + "px";
  el.style.removeProperty("padding-top");
  el.style.removeProperty("padding-bottom");
  el.style.removeProperty("margin-top");
  el.style.removeProperty("margin-bottom");
  setTimeout(() => {
    el.style.removeProperty("height");
    el.style.removeProperty("overflow");
    el.style.removeProperty("transition-duration");
    el.style.removeProperty("transition-property");
    el.style.removeProperty("transition-timing-function");
  }, duration);
};

el.offsetHeight;を上記の場所で記述する理由が理解できない

試しに、el.offsetHeight;を消したり記述位置を変えたりすると、アニメーションが滑らかではなくなります。
アニメーションがガタいて挙動が若干おかしくなるので、必要なコードというのは理解できるのですが、どのような役割を担っているのか不明なため知りたいです。

Answer 1

このあたりの情報をどうぞ。

【要素の横幅が0の時、再計算させてちゃんとした値を入れる - A Day in the Life】
https://secon.dev/entry/2011/04/23-subtech/

【ReFlowの原因とマークアップの最適化 - LINE ENGINEERING】
https://engineering.linecorp.com/ja/blog/reflow-and-markup-optimization/

Comments

[WebBeginner777]

Reflowの概念を知れたことで検索の幅が増えました。
私なりにも調べてみて理解まで一歩進むことができた気がします。

要するに今回のコードは、`offsetHeight;`でスタイルを参照することでReflowを発生させているということですかね。
スタイル変更時にReflowを強制的に発生させてないが故に、スタイル変更がスルーされた、あるいはスタイル変更がまとめて実行されているということで認識あっていますでしょうか。

[WebBeginner777]

こんな記事も見つけました
https://www.yoheim.net/blog.php?q=20140703