代码之家  ›  专栏  ›  技术社区  ›  Luckkks

过渡色工作不正常

  •  0
  • Luckkks  · 技术社区  · 5 月前

    我有一个按钮可以更改navBar上的主题颜色,它正在工作。当我点击按钮时,背景颜色的变化速度比文本颜色快。“Home”、“Cadastros”、“Dash”、“Notas”比图标和MainLayout中Outlet中呈现的任何内容都先发生变化 Demonstration

    相关代码

    index.css

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    * {
      @apply transition-all duration-300;
    }
    
    .lightTheme {
      --background: 250, 250, 250;
      --text: 0, 0, 0;
      --title: 0, 0, 0;
      --navBarShadow: 2, 6, 23, 0.1;
    }
    
    .darkTheme {
      --background: 15, 23, 42;
      --text: 250, 250, 250;
      --title: 250, 250, 250;
      --navBarShadow: 2, 6, 23, 0.2;
    }
    

    NavBar.jsx

    import { Moon, Sun, User } from "lucide-react";
    
    
    
    
    function NavBar({theme, onChangeThemeClick}) {
    
    
        const themeIcon = theme === 'lightTheme' ? <Sun  /> : <Moon  />;
    
    
    
    
        return (
            <nav className={` ${theme} w-full h-15 absolute z-10 top-0 bg-background text-title p-4 shadow-navBarShadow shadow-lg `}>
                <ul className="flex space-x-10 bg justify-end ">
                    <li ><a href="#" >Home</a></li>
                    <li><a href="#">Cadastros</a></li>
                    <li><a href="#">Dash</a></li>
                    <li><a href="#">Notas</a></li>
    
                    <li onClick={() => onChangeThemeClick()}><a href="#">
                        {themeIcon}
                    </a></li>
                    
                    <li ><a href="#">
                        <User />
                    </a></li>
    
    
                </ul>
            </nav>
            );
    }
    
    export default NavBar;
    
    

    主容器.jsx

    function MainContainer({theme, children}){
    
    
    
        return(
    
            <div className={`${theme} pt-20 z-0 w-full h-screen bg-background`}>
                {children}
            </div>
    
        )
    }
    
    export default MainContainer;
    

    注册表.jsx

    
    
    function RegistrationsTable() {
    
    
        return(
    
            <div className="w-1/2 h-max bg-background text-text border-text">
                
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <p>adad</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
    
        )
    }
    
    export default RegistrationsTable;
    

    注册页面.jsx

    
    import RegistrationsTable from "../components/RegistrationsTable.jsx";
    
    
    function RegistrationsPage() {  
    
    
    
        return (
            <>    
                <RegistrationsTable />
            </>
        );
    }
    
    export default RegistrationsPage;
    

    主布局.jsx

    
    import { useState } from 'react'
    
    
    import NavBar from '../components/NavBar.jsx'
    import { Outlet } from 'react-router-dom'
    import MainContainer from "../components/MainContainer.jsx";
    
    
    function MainLayout() {
    
    
    
      const [theme, setTheme] = useState('lightTheme')
    
    
    
      function onChangeThemeClick() {
    
        if (theme === 'lightTheme'){
          setTheme('darkTheme')
        } else if (theme === 'darkTheme'){
          setTheme('lightTheme')
        }
        
      }
    
      return (
        <>
          
            <NavBar  theme={theme} onChangeThemeClick={onChangeThemeClick} />
            <MainContainer theme={theme}>
              <Outlet />
            </MainContainer>
    
        </>
    
      )
    }
    
    export default MainLayout
    

    tailwind.config.js

    /** @type {import('tailwindcss').Config} */
    export default {
      content: ["./index.html", "./src/**/*.{html,js,jsx,ts,tsx}"],
      theme: {
        extend: {
          colors: {
            //Theme colors
            background: "rgba(var(--background))",
            text: "rgba(var(--text))",
            title: "rgba(var(--title))",
            navBarShadow: "rgba(var(--navBarShadow))",
          },
        },
      },
      plugins: [],
    };
    

    我试图将过渡持续时间应用于黑暗和光明主题,但不起作用。就像这样:

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    .lightTheme {
      --background: 250, 250, 250;
      --text: 0, 0, 0;
      --title: 0, 0, 0;
      --navBarShadow: 2, 6, 23, 0.1;
    
     @apply transition-all duration-300;
    }
    
    .darkTheme {
      --background: 15, 23, 42;
      --text: 250, 250, 250;
      --title: 250, 250, 250;
      --navBarShadow: 2, 6, 23, 0.2;
    
     @apply transition-all duration-300;
    }
    

    试图通过Outlet传递主题变量以在ClassName中使用它,但也不起作用

    1 回复  |  直到 5 月前
        1
  •  1
  •   Wongjn    5 月前

    没有明确定义的元素 color 集有 inherit 作为其有效价值。这意味着元素从其父元素解析其值:

    <div style="color: blue">
      I am blue.
      <p>I am blue also because I inherit from parent.</p>
    </div>
    

    在基于Chromium的浏览器中(根据您的屏幕截图,Opera基于Chromimium),当家长 颜色 值被切换,看起来像是子元素 继承 value获取新值 之后 转换发生,然后切换自己的解析值,播放自己的转换,从而导致级联延迟。

    因此,您可以考虑只应用 颜色 过渡到元素 不要 继承 作为一种价值 颜色 因此:

    • 改变你的 * 规则仅转换不符合以下条件的颜色属性 颜色 :
      * {
        transition: theme(transitionDuration.DEFAULT) theme(transitionTimingFunction.DEFAULT);
        transition-property: var(--transition-properties);
        --transition-properties: background-color, border-color;
      }
      
    • 过渡 颜色 仅适用于顶级:
      .lightTheme, .darkTheme {
        transition-property: color, var(--transition-properties);
      }
      
    • 和过渡 颜色 对于具有以下特性的元素 颜色 属性显式设置:
      <div className="… text-text … transition-color">
      

    tailwind.config = {
      theme: {
        extend: {
          colors: {
            //Theme colors
            background: "rgba(var(--background))",
            text: "rgba(var(--text))",
            title: "rgba(var(--title))",
            navBarShadow: "rgba(var(--navBarShadow))",
          },
        },
      },
    };
    <script src="https://cdn.tailwindcss.com/3.4.15"></script>
    <style type="text/tailwindcss">
    * {
      transition: theme(transitionDuration.DEFAULT) theme(transitionTimingFunction.DEFAULT);
      transition-property: var(--transition-properties);
      --transition-properties: background-color, border-color;
    }
    
    .lightTheme {
      --background: 250, 250, 250;
      --text: 0, 0, 0;
      --title: 0, 0, 0;
      --navBarShadow: 2, 6, 23, 0.1;
    }
    
    .darkTheme {
      --background: 15, 23, 42;
      --text: 250, 250, 250;
      --title: 250, 250, 250;
      --navBarShadow: 2, 6, 23, 0.2;
    }
    
    .lightTheme, .darkTheme {
      transition-property: color, var(--transition-properties);
    }
    </style>
    
    <div id="app"></div>
    
    <script src="https://unpkg.com/@babel/[email protected]"></script>
    <script type="text/babel" data-type="module">
      import React from "https://esm.sh/[email protected]";
      import client from "https://esm.sh/[email protected]/client";
      import { Moon, Sun, User } from "https://esm.sh/[email protected]";
      import { BrowserRouter, Routes, Route, Outlet } from "https://esm.sh/[email protected]";
    
      function NavBar({ theme, onChangeThemeClick }) {
        const themeIcon = theme === "lightTheme" ? <Sun /> : <Moon />;
    
        return (
          <nav
            className={` ${theme} w-full h-15 absolute z-10 top-0 bg-background text-title p-4 shadow-navBarShadow shadow-lg `}
          >
            <ul className="flex space-x-10 bg justify-end ">
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Cadastros</a>
              </li>
              <li>
                <a href="#">Dash</a>
              </li>
              <li>
                <a href="#">Notas</a>
              </li>
    
              <li onClick={() => onChangeThemeClick()}>
                <a href="#">{themeIcon}</a>
              </li>
    
              <li>
                <a href="#">
                  <User />
                </a>
              </li>
            </ul>
          </nav>
        );
      }
    
      function MainContainer({ theme, children }) {
        return (
          <div className={`${theme} pt-20 z-0 w-full h-screen bg-background`}>
            {children}
          </div>
        );
      }
    
      function RegistrationsTable() {
        return (
          <div className="w-1/2 h-max bg-background text-text border-text transition-color">
            <table>
              <tbody>
                <tr>
                  <td>
                    <p>adad</p>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        );
      }
    
      function RegistrationsPage() {
        return (
          <>
            <RegistrationsTable />
          </>
        );
      }
      
      const { useState } = React;
    
      function MainLayout() {
        const [theme, setTheme] = useState("lightTheme");
    
        function onChangeThemeClick() {
          if (theme === "lightTheme") {
            setTheme("darkTheme");
          } else if (theme === "darkTheme") {
            setTheme("lightTheme");
          }
        }
    
        return (
          <>
            <NavBar theme={theme} onChangeThemeClick={onChangeThemeClick} />
            <MainContainer theme={theme}>
              <Outlet />
            </MainContainer>
          </>
        );
      }
    
      
      client.createRoot(document.getElementById('app')).render(
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<MainLayout />}>
              <Route path="js" element={<RegistrationsPage />} />
            </Route>
          </Routes>
        </BrowserRouter>
      );
    </script>