侧边栏滑动过渡的问题

Question

我正在使用 React 和 Tailwind CSS。我正在尝试对此设置侧边栏应用过渡。

当我单击图标时，侧边栏会打开，但过渡不起作用。这是我在 themeSettings 函数中应用的条件。

import React from 'react'
import {MdClose} from 'react-icons/md'
import {BsCheck} from 'react-icons/bs'
import { themeColors } from '../data/dummy'
import { useStateContext } from '../contexts/ContextProvider'

export default function ThemeSettings() {
    const {setColor, setMode, currentMode, currentColor, setThemeSettings, themeSettings} = useStateContext()
  return (
    <div className='bg-half-transparent font-signika w-screen fixed nav-item top-0 right-0'>
        <div className={`${ themeSettings ? 'right-0' : '-right-full'} w-full shadow-2xl xs:w-[70vw] md:w-[40vw] xl:w-[30vw] h-full fixed dark:text-white dark:bg-secondary-dark-bg bg-white top-0 dark:[#484B52] transition-all duration-300`}>
            <div className='flex items-center justify-between p-4 ml-4'>
                <p className='font-semibold text-2xl'>Settings</p>
                <button type='button' onClick={() => setThemeSettings(false)}  className='text-2xl p-3 rounded-full dark:text-gray-300 dark:hover:bg-slate-600 hover:bg-gray-400'>
                    <MdClose/>
                </button>
            </div>
            <div className='flex-col border-t-1 border-color p-4 ml-4'>
                <p className='font-semibold text-xl'>Theme Options</p>
                <div className='mt-4'>
                    <input type="radio" id='light' name='theme' value='Light' className='cursor-pointer' onChange={setMode} checked={currentMode === 'Light'}/>
                    <label htmlFor="light" className='text-md cursor-pointer ml-2'>Light</label>
                </div>
                <div className='mt-4'>
                    <input type="radio" id='dark' name='theme' value='Dark' className='cursor-pointer' onChange={setMode} checked={currentMode === 'Dark'}/>
                    <label htmlFor="dark" className='text-md cursor-pointer ml-2'>Dark</label>
                </div>
            </div>
            <div className='flex-col border-t-1 border-color p-4 ml-4'>
                <p className='font-semibold text-xl'>Theme Colors</p>
                <div className='flex gap-3'>
                    {themeColors.map((item) => (
                       <div className='relative mt-2 curosr-pointer flex gap-5 items-center'>
                        <button type='button'className='h-10 w-10 rounded-full cursor-pointer' style={{backgroundColor: item.color}} onClick={() => setColor(item.color)}>
                            <BsCheck className={`ml-2 text-2xl text-white ${item.color === currentColor ? 'block' : 'hidden'}`}/>
                        </button>
                       </div>
                    ))}
                </div>
            </div>
        </div>
    </div>
  )
}

在这里您可以找到我放置状态的上下文提供者

import { useState, createContext, useContext } from "react";

const StateContext = createContext()
const initialState = {
    cart: false,
    notification: false,
    searchBar: false,
}

export const ContextProvider = ({ children }) => {
    const [activeMenu, setActiveMenu] = useState(true)
    const [isClicked, setIsClicked] = useState(initialState)
    const [screenSize, setScreenSize] = useState(undefined)
    const [currentColor, setCurrentColor] = useState('#03C9D7')
    const [currentMode, setCurrentMode] = useState('Light')
    const [themeSettings, setThemeSettings] = useState(false)

    const setMode = (e) => {
        setCurrentMode(e.target.value)
        localStorage.setItem('ThemeMode', e.target.value)
        setThemeSettings(false)
    }

    const setColor = (color) => {
        setCurrentColor(color)
        localStorage.setItem('colorMode', color)
        setThemeSettings(false)
    }

    const handleClick = (clicked) => {
        setIsClicked({...initialState, [clicked]: true})
    }

    return (
        <StateContext.Provider value={{ 
            activeMenu,
            setActiveMenu,
            isClicked,
            setIsClicked,
            handleClick,
            screenSize,
            setScreenSize, currentColor,
            currentMode,
            setColor,
            setMode,
            themeSettings, 
            setThemeSettings
         }}>
            {children}
        </StateContext.Provider>
    )
}

export const useStateContext = () => useContext(StateContext)

在导航栏中，我以这种方式触发事件：

<NavButton customFunc={() => setThemeSettings(true)} icon={<IoMdSettings />} />

Answer 1

我认为这可能很简单，就像你从右 0 到

-right-full

你的意思是

right-full

吗？没有-？这意味着您可以正确更改一个属性，并且动画可能会启动。