如何让内容随侧边栏一起流畅滑动？[反应]

Question

当我的侧边栏转换为宽度：0 时，它旁边（右侧）的内容不会随之滑动。这就像文本在取代侧边栏的位置之前等待侧边栏完成其动画，即使我也设置了它的过渡。

我在下面提出了一个最小的可重现示例：

//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;

Answer 1

当您将 Sidebar 的 width 从 100% 更改为 0 时，它只是从内容流中取出，并且 Dashboard然后是向左重新定位。要使 Sidebar 和 Dashboard 一起过渡，而两者之一发生 width 变化，您需要在两个组件的宽度之间建立关系。

请参考这个CodeSandbox example我给你整理的

在其中，我设置了一个全局 CSS 变量，如下所示：

/* styles.css */

:root {
  --sidebar: 150px;
}

并在 Sidebar 和 Dashboard 中使用它，如下所示：

/* Sidebar.css */

.sidebar {
  width: var(--sidebar);
  /* no other changes */
}

/* Dashboard.css */

.dashboard {
  width: calc(100% - var(--sidebar));
  /* no other changes */
}

通过上述，每当 Sidebar 的宽度发生变化时，它会反映 Dashboard 宽度的值，使两个过渡同步。

如何让内容随侧边栏一起流畅滑动？[反应]

How to make the content slide smoothly together with the sidebar?[react]

html

javascript

css

transition

reactjs