CSSのheight:auto; でtransitionを使うためのJavaScriptについて

CSSのheightプロパティをautoにしつつ、transitionプロパティを使う方法を探しています。

まずは、こちらをご覧ください。

HTML
1<body>
2  <section>
3    <div class="section_head">
4      <h2>ハンバーグの作り方</h2>
5    </div>
6    <div class="section_body">
7      <p>ハンバーグの作り方は以下の通りです。</p>
8      <p>材料は...
9      :
10      :
11      :
12      ...以上で完成となります。</p>
13    </div>
14  </section>
15</body>

CSS
1*{
2  display: flex;
3}
4html{
5  display: block;
6}
7head{
8  display: none;
9}
10body,
11section{
12  flex-flow: column nowrap;
13}
14.section_body{
15  flex-flow: column nowrap;
16  over-flow: hidden;
17  transition: all 1s 0s ease;
18}

JavaScript
1onload = () => {
2  const section = document.querySelectorAll("section");
3  const section_head = document.querySelectorAll("section_head");
4  const section_body = document.querySelectorAll("section_body");
5  for(let i = 0; i < section.length; i++){
6    section_body[i].style.maxHeight = "0px";
7    section_head[i].addEventListener("click", () => {
8      if(section_body[i].style.maxHeight === "0px"){
9        section_body[i].style.maxHeight = "none";
10        let rect = section_body[i].getBoundingClientRect();
11        section_body[i].style.maxHeight = "0px";
12        section_body[i].style.maxHeight = rect.height + "px";
13        section_body[i].style.maxHeight = "none";
14      }else{
15        section_body[i].style.maxHeight = "0px";
16      }
17    });
18  }
19}

HTMLの<div class="section_head">タグが見出し、<div class="section_body">タグが本文です。
ページ読み込み時には本文部分が見えなくなっており、見出し部分をクリックするたびにシュッ！シュッ！と上下方向にアニメーションさせたいのです。
JavaScriptは――

ページを開こうとするとmax-heightをnoneにして全文を表示する
本文部分の高さを取得し、すかさずmax-heightを0pxにすることで何事も無かったかのように
先ほど取得した高さの分だけ本文部分を縦方向に伸ばす
最後にmax-heightをnoneにすることで、ブラウザのウィンドウサイズが弄られても本部部分がそれに対応して伸び縮みする

――という処理をするべく書いてみたのですが上手に動かず難儀しています。
開いた常態から閉じる分には問題ないのですが開いたときはパッ！と表示されてしまうので何とかしたいと思っています。

長くなりましたが、ご回答のほど、よろしくお願い申し上げます。

yoshinavi

2019/03/09 12:21

CSSは何か参考にされたのでしょうか？意図するレイアウトでしょうか？

AGadget

2019/03/09 13:35

早速ありがとうございます。ただ、申し訳ありません。質問の意図がよく分かりませんので的外れの返答となるかもしれませんが、ご了承ください。 CSSを始めとして、HTML、JavaScriptともに趣味の範疇として独学でやっております。 CSSの書き方については入門書や入門サイトを参考にして、今のところ一番良いと思える書き方をしております。プロパティ等の指定ということでしたら、こちらも独学のため、かなり変な内容になっているかと思います。 *{display:flex;}などは、かなり変な書き方じゃないかなとは思いつつ、今のところはこの書き方が楽なので採用しています。今後、より良い書き方があれば、どんどん乗り換えていこうと考えております。あるいは「この質問で提示したコードは実際に使うコードと同じものか?」ということでしたら、かなり違うものを載せております。できるだけ質問文に乗せるコードは少ないほうが良いかと思い、できるだけ削りました。

kei344

2019/03/09 17:39

提示のコードは動作しません。書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

yoshinavi

2019/03/10 00:58 編集

＞*{display:flex;} →　全ての要素にflexが設定されるので、今後のレイアウトに支障をきたしますので、これはやめた方が良いです。＞html{display:block;}、head{display:none;} →　これは全てのブラウザがデフォルト設定していますので不要です。

yoshinavi

2019/03/10 01:02

＞できるだけ質問文に乗せるコードは少ないほうが良いかと思い、できるだけ削りました。 →　要点に絞るのは良い事です。しかし、問題が再現できないコードであれば、誰も回答が出来ませんので、提示のコードは「問題が再現するコード」にしてください。

行動規範の内容に同意します

回答1件

自己解決

yoshinavi様、kei344様。
ご回答ありがとうございました。
また、質問内容に不備があり申し訳ありませんでした。

ところで質問の件なのですが、こちらのほうで一応解決致しました。
まだ理想通りの動きとは言い難い状態ですが、最低限の動きができましたので後は色々と試行錯誤していこうと思います。

重ねて、ありがとうございました。

-- 追記 --
解決方法について記載致します。

当質問の意図は「height:auto; のときtransitionを使って、アニメーションをさせる方法は無いか」というものでした。
結果としてはheightプロパティをautoにしたままtransitionさせることはできないので、max-heightプロパティをJavaScriptで操作して疑似的(?)に動かせるようになりました。
サンプルが文末に乗っていますので参考までに。

考え方としては次の通りです。

height:auto; で transition を使って手軽にアニメーションさせたいが不可能なので動かしたい対象の max-height を 0px にすることで height:0px; にしたみたいに隠す(overflow:hidden; も必要)。
クリック、あるいはホバーしたときアニメーションを開始。まずは対象が完全に伸び切った後の height が知りたいので max-height:none; と getBoundingClientRect でheightを知り、変数に代入しておく
一旦 max-height を 0px にして閉じ、先の変数の値に従って伸ばそうとする……と原因は分かりませんが正常に動作しないので setTimeout で 1ミリ秒待ってから伸ばします
transition-durationプロパティの値だけ setTimeout で待ってからmax-height:none; を当てることでheight上限値が無くなり、height:auto; が効いたレスポンシブ(?)な挙動になります。

以上

HTML
1<body>
2  <section>
3    <div class="section_head"</div>
4      <h1>ハンバーグの作り方</h1>
5    </div>
6    <div class="section_body">
7      <p>ハンバーグ0、ハンバーグ1、ハンバーグ2、ハンバーグ3、
8         ハンバーグ4、ハンバーグ5、ハンバーグ6、ハンバーグ7、
9         ハンバーグ8、ハンバーグ9、ハンバーグA、ハンバーグB、
10         ハンバーグC、ハンバーグD、ハンバーグE、ハンバーグF
11      </p>
12    </div>
13  </section>
14</body>

CSS
1@charset "utf-8";
2*{
3  border: none;
4  font: normal normal normal 15px normal sans-serif;
5  list-style: none;
6  margin: 0px;
7  outline: none;
8  padding: 0px;
9  text-decoration: none;
10}
11.section_body{
12  overflow: hidden;
13  transition: all 0.5s 0s ease;
14}
15.section_head{
16  background: rgb(255, 153, 102);
17}
18h1{
19  color: rgb(255, 255, 255);
20}
21p{
22  margin: 10px;
23}
24section{
25  border: solid 5px rgb(255, 153, 102);
26  margin: 10px;
27}

JavaScript
1onload = () => {
2  let open_close;
3  let rect;
4  const section = document.querySelectorAll("section");
5  const section_body = document.querySelectorAll(".section_body");
6  const section_head = document.querySelectorAll(".section_head");
7  for(let i = 0; i < section.length; i++){
8    section_body[i].style.maxHeight = "0px";
9    section_head[i].addEventListener("click", () => {
10      if(section_body[i].style.maxHeight === "0px"){
11        section_body[i].style.maxHeight = "none";
12        rect = section_body[i].getBoundingClientRect();
13        section_body[i].style.maxHeight = "0px";
14        open_close = () => { 
15          section_body[i].style.maxHeight = rect.height + "px";
16        }
17        setTimeout(open_close, 1);
18        open_close = () => {
19          section_body[i].style.maxHeight = "none";
20        }
21        setTimeout(open_close, 500);
22      }else{
23        rect = section_body[i].getBoundingClientRect();
24        section_body[i].style.maxHeight = rect.height + "px";
25        open_close = () => {
26          section_body[i].style.maxHeight = "0px";
27        }
28        setTimeout(open_close, 1);
29      }
30    });
31  }
32}