アニメーションのサイドバーでTrewWindCSSを作成する💫

おい皆さん、あなたがサイドバーを必要とする多くのアプリでは、あなたがハンバーガーアイコンをクリックするならば、引き出します.このチュートリアルでは🌟.

デモ
Video

セットアップ
新しい反応アプリを作成する

npx create-react-app animated-sidebar

TailWindCSSの設定
tailwindのインストール

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

パスの設定
内部でtailwind.config.jdの内容を置き換えます-

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

にCookWindowを加えるindex.cssでこのコードブロックを追加します.

@tailwind base;
@tailwind components;
@tailwind utilities;

サイドバーの作成

新しいコンポーネントの作成
私はサイドバーのための別々のコンポーネントを作成するつもりです、したがって、Sidebar.jsフォルダでファイルsrcを作成してください.次に機能的なコンポーネントを作成します.

const Sidebar = () => {
  return (
    <div>

    </div>
  )
}

export default Sidebar

サイドバーコンポーネントのレンダリング
また、コンポーネントをレンダリングする必要があります.

import Sidebar from "./Sidebar";

function App() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <Sidebar />
    </div>
  );
}

export default App;

これは今私たちに空のキャンバスを表示する必要があります.

基本サイドバーの作成
私は、それのテキストで単純なdivを作ります

<div className="top-0 right-0 w-[35vw] bg-blue-600  p-10 pl-20 text-white fixed h-full ">
  <h2 className="mt-20 text-4xl font-semibold text-white">I am a sidebar</h2>
</div>

これは、右側に単純な、青いサイドバーを与えます


オープン・クローズ状態の取り扱い
USEstateを作成し、サイドバーを表示しないかどうかを判断するブール値を格納します.

const [showSidebar, setShowSidebar] = useState(false);

閉じるこの動画はお気に入りから削除されています.(元に戻す)お気に入りに追加しますか?

<>
  {showSidebar ? (
    <button
      className="flex text-4xl text-white items-center cursor-pointer fixed right-10 top-6 z-50"
      onClick={() => setShowSidebar(!showSidebar)}
    >
      x
    </button>
  ) : (
    <svg
      onClick={() => setShowSidebar(!showSidebar)}
      className="fixed  z-30 flex items-center cursor-pointer right-10 top-6"
      fill="#2563EB"
      viewBox="0 0 100 80"
      width="40"
      height="40"
    >
      <rect width="100" height="10"></rect>
      <rect y="30" width="100" height="10"></rect>
      <rect y="60" width="100" height="10"></rect>
    </svg>
  )}

  <div className="top-0 right-0 w-[35vw] bg-blue-600  p-10 pl-20 text-white fixed h-full z-40">
    <h3 className="mt-20 text-4xl font-semibold text-white">I am a sidebar</h3>
  </div>
</>

これは今のところ何の違いもありませんが、メインサイドバーにいくつかの条件付きクラスを追加しましょう.

<div
  className={`top-0 right-0 w-[35vw] bg-blue-600  p-10 pl-20 text-white fixed h-full z-40 ${
    showSidebar ? "translate-x-0 " : "translate-x-full"
  }`}

App.js変数がTRUEならば、showSidebar以外のtranslate-x-0を追加します.我々のサイドバーは今🎉
Video
しかし、それは滑らかではないので、我々はどのようにスムーズにアニメーションを確認してみましょう.ちょうどこれらの2つのクラスを青いdivに加えてください

ease-in-out duration-300

divはこのようになります-

<div
  className={`top-0 right-0 w-[35vw] bg-blue-600  p-10 pl-20 text-white fixed h-full z-40  ease-in-out duration-300 ${
    showSidebar ? "translate-x-0 " : "translate-x-full"
  }`}
>
  <h3 className="mt-20 text-4xl font-semibold text-white">I am a sidebar</h3>
</div>

私たちのサイドバーのアニメーションは非常に滑らかで素晴らしい外観!🥳
Video
このチュートリアルが好きで、プロジェクトのサイドバーに素敵なアニメーションを追加します.平和✌️

便利なリンク
GitHub repo
Animate and Change Header Background on Scroll
Connect with me