質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

658閲覧

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

AGadget

総合スコア60

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2019/03/09 06:38

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は――

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答1

0

自己解決

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

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

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

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

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

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

  1. height:auto; で transition を使って手軽にアニメーションさせたいが不可能なので動かしたい対象の max-height を 0px にすることで height:0px; にしたみたいに隠す(overflow:hidden; も必要)。

  2. クリック、あるいはホバーしたときアニメーションを開始。まずは対象が完全に伸び切った後の height が知りたいので max-height:none; と getBoundingClientRect でheightを知り、変数に代入しておく

  3. 一旦 max-height を 0px にして閉じ、先の変数の値に従って伸ばそうとする……と原因は分かりませんが正常に動作しないので setTimeout で 1ミリ秒待ってから伸ばします

  4. 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}

投稿2019/03/10 13:16

編集2019/03/11 19:29
AGadget

総合スコア60

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問