Cuando mi barra lateral cambia a ancho: 0, el contenido justo al lado (a su derecha) no se desliza con él. Es como si el texto esperara a que la barra lateral terminara con su animación antes de ocupar el lugar de la barra lateral, aunque también configuré su transición.
Se me ocurrió un ejemplo mínimo reproducible a continuación:
//Sidebar.js import './styles/Sidebar.css' export const Sidebar = () => { const [show, setShow] = useState(false); const toggle = ()=>{ setShow(!show); } return ( <div> <div id={'toggle-btn'}> <button type='button' className='toggle-btn' onClick={toggle}> toggle </button> </div> <div style={{display:"flex"}}> <aside className={'sidebar' + (show ? ' showSidebar':'')}> <ul className='menuList'> <li>Perfil</li> <li>Estatísticas</li> <li>Adicionar Itens</li> <li>Procurar</li> </ul> </aside> </div> </div> ) } /*Sidebar.css*/ .sidebar { width:100%; overflow: hidden; box-shadow: 0 8px 8px -4px ; transform: translateX(0); transition:all 1s ease; height:100vh; } .showSidebar { width:0; } //Dashboard.js import './styles/Dashboard.css' export const Dashboard = () => { return ( <div className='dashboard'> <p> LORE IPSUM BLA BLA </p> </div> ) } /*Dashboard.css*/ .dashboard { max-width: 30%; margin-top:10rem; transition:all 1s ease; } //App.js function App() { return ( <div style={{display:"flex"}}> <Sidebar /> <Dashboard /> </div> ); } export default App;Cuando cambia el width de la Sidebar de 100% a 0 , simplemente se elimina del flujo de contenido y el Dashboard se reposiciona a la izquierda. Para hacer la transición de la Sidebar y el Dashboard juntos mientras uno de los dos tiene un cambio de width , debe establecer una relación entre los anchos de los dos componentes.
Consulte este ejemplo de CodeSandbox que preparé para usted.
En él, configuré una variable CSS global como la siguiente:
/* styles.css */ :root { --sidebar: 150px; } Y utilícelo tanto en la Sidebar como en el Dashboard como se muestra a continuación:
/* Sidebar.css */ .sidebar { width: var(--sidebar); /* no other changes */ } /* Dashboard.css */ .dashboard { width: calc(100% - var(--sidebar)); /* no other changes */ } Con lo anterior, cada vez que cambie el ancho de Sidebar , reflejará el valor en el ancho de Dashboard , haciendo que ambas transiciones estén sincronizadas.