BootStrap4のドロップダウンにアニメーションを追加したい

Question

以下のような構成のドロップダウンメニューの表示でアニメーションお動きを追加したいので、とりあえずbootstrap.css内のいろんな”.dropdown-＊”系セレクタに「transition: all 1s;」を追加していったりしたのですが効きませんでした。.collapsingのようなtransitionの設定部分はドロップダウンにはないでしょうか？よろしくお願いします

    <div class="dropdown">
      <!-- 切替ボタン -->
      <button
        type="button"
        class="btn btn-secondary dropdown-toggle"
        id="dropdownMenuButton"
        data-toggle="dropdown"
        aria-haspopup="true"
      >
        ドロップダウンボタン
      </button>
      <!-- ドロップメニュー -->
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">メニュー1</a>
        <a class="dropdown-item" href="#">メニュー2</a>
        <a class="dropdown-item" href="#">メニュー3</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">その他リンク</a>
      </div>
    </div>

Comments

[m.ts10806]

どのようなアニメーションでしょうか。

[Fujiman]

説明不足ですみません。たとえばフェードイン・アウトとかです

[m.ts10806]

でしたらJavaScriptになるのではと。

[Fujiman]

ありがとうございます。もしできればサンプルなど教えてもらえますか？
また、それとは別にCSSの範疇で可能なものもあるのでしょうか？例えばスライドイン・アウトなど。

[m.ts10806]

えーとできれば、キーワードにして調べて試してからにしてもらいたいですが・・（今回提示されたコードもHTMLだけなのでcssで試したものにはなってないようですし）

[m.ts10806]

ただ、いずれにしても「メニューの出現」を制御しようとしたらBootstrap本体のコードいじる必要があるかもしれません。
イベントはいくらか用意されているので、そこから挙動を確認してみるとかですね。
https://getbootstrap.com/docs/4.5/components/dropdowns/#dropdown-options

[Fujiman]

ありがとうございます。Bootstrap自体をいじるのかとか、後付でいくのかとか、どういう方向で行くのが”普通”なのかが知りたい点でもありました。JavaScriptを使うのはアンチなのかな？とか思ったりしてたのでスッキリしました。

[m.ts10806]

>JavaScriptを使うのはアンチなのかな？
そもそもBootstrapの各機能に大量にJavaScriptが使われていますし、
今回のドロップダウンにもクラスのつけ外しがJavaScriptで行われています。
ブラウザのデベロッパツールの「Elements」でdropdownクラスをあてているあたりをフォーカスするとどのようなつけ外しがされているか見えると思います。

[m.ts10806]

>Bootstrap自体をいじるのかとか、後付でいくのかとか、どういう方向で行くのが”普通”なのかが知りたい点でもありました。

Bootstrapが機能的に提供しているoptionで対応していないものは自作
しているものは機能で対応

ですね。
なので、変に組みすぎてしまわないためにもドキュメントを確認する必要があります。

[m.ts10806]

まぁただ、全部にBootstrapで対応する必要はないので
思ったようなアニメーションでドロップダウンしてくれるプラグインを探してくるのも手です。なければ一通り自分で組むしかありません。

[Fujiman]

お考えの紹介ありがとうございます。一時的にBootStrapがゴリゴリに使われたページのメンテをしないといけなくなり、BootStrapが初めてなのでどういう方針で行くか（どういうのが普通なのか）を最初にわかってないと後任の人に迷惑だし困ったなぁと思っていました。「全部にBootstrapで対応する必要はない」ということを聞いてちょっと安心しました。ありがとうございます。
とりあえず社内ルールの範囲内で自由にやらせてもらおうかという気になれましたｗ

[m.ts10806]

社内ルールがどんなものか分かりませんが、要件満たせればあとは技術的な観点だけです。
CSSフレームワークにも色々あるので組み合わせて使うこともあるでしょうし、デフォルトの機能だけだとBootstrapっぽさだけが見えてそれが嫌だという人もいます。
レスポンシブのところだけ使ってあとは自走とか割とある話ですよ。

[Fujiman]

なるほど！すごく参考になる示唆です。ありがとうございます。確かにレスポンシブのためのグリッドを確定させるためだけにこの枠組みを使って、あとは個別にということにしたら気が楽です。正直、フレームワーク全体を抑えるのがめんどくさいーーと思ってました

Answer 1

      $(document).ready(function(){
         /* ドロップダウンメニューの親要素で発火するらしい */
        $('.dropdown').on('show.bs.dropdown', function () {
          $('.dropdown-menu').fadeIn(1000);
        })
        $('.dropdown').on('hidden.bs.dropdown', function () {
          $('.dropdown-menu').fadeOut(1000);
        })
      })