スムーズに開閉する要素の作り方
@hirocode
このチャンネルでは、Webデザイナーに必要なスキルや知識など、「Webデザイナー」や「フロントエンドエンジニア」の方達に向けた動画をお届けしています☺️♪
#shorts #hirocode #ヒロコード #プログラミング #コーディング #html #css #javascript #htmlcss #programming #coding #webデザイナー #webdesign #webdesigner
@hirocode
このチャンネルでは、Webデザイナーに必要なスキルや知識など、「Webデザイナー」や「フロントエンドエンジニア」の方達に向けた動画をお届けしています☺️♪
#shorts #hirocode #ヒロコード #プログラミング #コーディング #html #css #javascript #htmlcss #programming #coding #webデザイナー #webdesign #webdesigner
Пікірлер: 17
めっちゃ わかりやすい（んだろうなぁ
@hirocode
Ай бұрын
笑笑笑ありがとうございます😂❗️
JavaScriptで高さを変化させてました。 これなら楽だ
@hirocode
Ай бұрын
コメントありがとうございます😆❗️
参考になります、ショートでこのクオリティはありがたいです🙏🙇♀️
@hirocode
Ай бұрын
嬉しいです😭ありがとうございます🙇❗️
height autoってtransitionの対象外だからこれはほんとにすごい！
@hirocode
Ай бұрын
おっしゃる通りです‼️これだと変動的な高さでもJSなしでスムーズに開閉できます😆❗️
これまたすごい実装方法ですね！ "よくある質問"のような、コンテンツの文字数が動的な要素でもアコーディオンのように実装可能なのでしょうか？
@hirocode
Ай бұрын
コメントありがとうございます❗️変動的な高さでも動作します❗️ 普通に、height: 0; → height: auto;みたいな形でtransition使おうとするとスムーズに開閉させることができませんが、この動画の指定だと、高さが変動的なものでもスムーズに開閉させることができます😆❗️
@kaoka288
Ай бұрын
@@hirocode アコーディオンはjs使うのが結構当たり前だと思うんですけど、これ革命ですね！
cssって意外と何でも作れるな
transitionプロパティーの grid -template-rows.4;は transition .4s;とは違うのでしょうか？
@hirocode
Ай бұрын
同じ挙動です！デフォルトallなので全てのプロパティにtransitionが適用されますが、この指定では特定のプロパティに限定して指定しています😆❗️
@LEITULU
Ай бұрын
@@hirocode 返事ありがとうございます。 まさかJavaScriptを使わずにこんなに簡単な開閉する要素を作れるとは思いませんでした！
これsafariでアニメーション動かないんじゃない？ grid-template-rowはsafariでトランジションが効かなかった記憶
@Mia-kx6rn
Ай бұрын
古いブラウザはそうですね🥹最近のは対応してるみたい