TailwindのUIコンポーネントFlowbiteのNavbarでアニメーションする方法

上から下へメニューが出てくる簡単なアニメーションの実装方法のメモになります。
Flowbiteを使用したナビゲーションメニューの基本的な実装方法はFlowbiteのサイトをご参照ください。
Tailwind CSS Navbar - Flowbite

Tailwind CSS Navbar - Flowbite

カスタマイズ方法

1.メニューのdivタグのclassにtransitionを追加する

class="....transition-all ease-in-out duration-500"

2.Collapseクラスを継承して独自クラスを作成

class MenuCollapse extends Collapse {
    private body = document.querySelector('body');

    public collapse() {
        //console.log('menu collapse');
        // bodyのスクロール設定
        this.body.classList.remove('h-full');
        this.body.classList.remove('overflow-hidden');

        // ハンバーガーアイコンの表示・非表示
        this._triggerEl.querySelector('.open-button').classList.remove('hidden');
        this._triggerEl.querySelector('.close-button').classList.add('hidden');

        // 高さを0にする
        this._targetEl.style.height = '0px';

        if (this._triggerEl) {
            this._triggerEl.setAttribute('aria-expanded', 'false');
        }
        this._visible = false;
        this._options.onCollapse(this);
    }

    public expand() {
        //console.log('menu expand');
        // bodyのスクロール設定
        this.body.classList.add('h-full');
        this.body.classList.add('overflow-hidden');

        // ハンバーガーアイコンの表示・非表示
        this._triggerEl.querySelector('.open-button').classList.add('hidden');
        this._triggerEl.querySelector('.close-button').classList.remove('hidden');

        // 高さを「ウインドウの高さ - ヘッダーの高さ」にする
        this._targetEl.style.height = (window.innerHeight - 92) + 'px';

        if (this._triggerEl) {
            this._triggerEl.setAttribute('aria-expanded', 'true');
        }
        this._visible = true;
        this._options.onExpand(this);
    }
}

3.独自クラスを使用してCollapseの設定を行う

const navbarStickyMenu = document.getElementById('navbar-sticky-menu');
const navbarStickyButton = document.getElementById('navbar-sticky-button');
const navbarStickyCollapse = new MenuCollapse(
    navbarStickyMenu,
    navbarStickyButton,
    {
        onCollapse: () => {
        },
        onExpand: () => {
        },
        onToggle: () => {
        }
    }
);

メニューのdivタグに追加するCSS classを変更、独自クラスのcollapse、expandメソッド内の実装をカスマイズすることで様々なアニメーションが出来ると思います。参考になれば幸いです。

上記のアニメーションを実装したWEBサイト

アニソン・オンライン - アニメの主題歌、オープニング、エンディング、挿入歌等の情報サイト