feat: add smooth transition animation for theme switching @Yixuan Lu

src/components/Header.css

@@ -85,3 +85,24 @@
   padding: 0;
   margin: 0;
 }
+
+/* Transition Animation */
+.theme-transition {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.theme-transition.transitioning {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.transition-bg {
+  transition: background-color 0.3s ease;
+}
+
+.transition-text {
+  transition: color 0.3s ease, opacity 0.3s ease;
+}
+
+.transition-logo {
+  transition: opacity 0.3s ease;
+}

src/components/Header.js

@@ -1,28 +1,31 @@
-import { Navbar, Container } from "react-bootstrap";
-import "./Header.css";
-import { useContext, useState, useEffect, useRef } from "react";
-import logo from "./../logo.png";
-import logo_white from "./../logo-white.png";
+import { useContext, useEffect, useState } from "react";
+import { Container, Navbar } from "react-bootstrap";
 import { useDebouncedCallback } from "use-debounce";
+import logo_white from "./../logo-white.png";
+import logo from "./../logo.png";
+import "./Header.css";
 // Context
 import { ThemeContext } from "../Context/themeContext";
 import Darkmode from "./Buttons/Darkmode";
 import CustomSelect from "./Buttons/Language";
 
 const Header = ({ language, setLanguage, setInputSearch }) => {
   const { theme, changeTheme } = useContext(ThemeContext);
-  const [input, setInput] = useState(""); // Mirrors inputSearch and setInputSearch
+  const [input, setInput] = useState("");
+  const [isTransitioning, setIsTransitioning] = useState(false);
 
-  const debouncedInput = useDebouncedCallback(
-    (value) => {
-      setInputSearch(value);
-    },
-    // delay in ms
-    1000
-  );
+  const debouncedInput = useDebouncedCallback((value) => {
+    setInputSearch(value);
+  }, 1000);
+
+  const handleThemeChange = () => {
+    setIsTransitioning(true);
+    changeTheme();
+    setTimeout(() => setIsTransitioning(false), 300); // 匹配动画时长
+  };
 
   const handleInputSearch = (inputValue) => {
-    setInputExpanded(true); // Keep input expanded while typing
+    setInputExpanded(true);
     setInput(inputValue);
     debouncedInput(inputValue);
   };
@@ -31,46 +34,48 @@ const Header = ({ language, setLanguage, setInputSearch }) => {
     setInputSearch(input);
   }, [input, setInputSearch]);
 
-  const [inputExpanded, setInputExpanded] = useState(false); // Control input expansion state
+  const [inputExpanded, setInputExpanded] = useState(false);
 
   const handleSearchClick = () => {
-    setInputExpanded((prev) => !prev); // Expand input when clicked
+    setInputExpanded((prev) => !prev);
   };
 
   return (
-    <Navbar id="header">
-      <Container className=" flex lg:flex-row flex-col  justify-center items-center  w-full px-4">
-        <Navbar.Brand href="/" className="d-none d-sm-block ">
-          {theme.mode === "light" ? (
-            <img src={logo_white} alt="Logo" className="w-24 h-24"></img>
-          ) : (
-            <img src={logo} alt="Logo" className="w-24 h-24"></img>
-          )}
+    <Navbar
+      id="header"
+      className={`theme-transition ${isTransitioning ? "transitioning" : ""}`}
+    >
+      <Container className="flex lg:flex-row flex-col justify-center items-center w-full px-4">
+        <Navbar.Brand href="/" className="d-none d-sm-block">
+          <img
+            src={theme.mode === "light" ? logo_white : logo}
+            alt="Logo"
+            className="w-24 h-24 transition-logo"
+          />
         </Navbar.Brand>
 
         <div className="flex justify-around items-center gap-11 w-full">
           <label
             className={`${
               theme.mode === "light" ? "bg-slate-200" : "bg-slate-500"
-            }  flex rounded-3xl p-2 h-11 w-full md:w-[40rem]`}
+            } flex rounded-3xl p-2 h-11 w-full md:w-[40rem] transition-bg`}
           >
             <CustomSelect
-              theme={theme} // Correctly pass theme directly
-              language={language} // Correctly pass language
-              setLanguage={setLanguage} // Correctly pass setLanguage
+              theme={theme}
+              language={language}
+              setLanguage={setLanguage}
             />
-            {/* Project Search Bar */}
             <input
               type="text"
               className={`transition-all h-7 ml-2 border-solid border-l-2 border-l-violet-950 pl-2 duration-1000 ease-in-out focus:outline-none outline-none ${
                 inputExpanded
                   ? "w-1/2 pl-5 border-b-slate-300 border-b-2 border-solid"
                   : "w-1/2"
-              } bg-transparent  ${
+              } bg-transparent ${
                 theme.mode === "dark"
                   ? "opacity-100 text-slate-200"
                   : "opacity-70 text-slate-800"
-              }`}
+              } transition-text`}
               placeholder="Search"
               autoComplete="off"
               onMouseEnter={handleSearchClick}
@@ -79,10 +84,8 @@ const Header = ({ language, setLanguage, setInputSearch }) => {
             />
           </label>
           <div
-            onClick={changeTheme}
-            className={
-              "cursor-pointer max-lg:!hidden hover:scale-105 transition-all ease-linear duration-200"
-            }
+            onClick={handleThemeChange}
+            className="cursor-pointer max-lg:!hidden hover:scale-105 transition-all ease-linear duration-200"
             style={{ fontSize: "1.5rem" }}
             aria-hidden="true"
           >