CSS 随 State 变化时的过渡 - React

Question

我有一个侧边栏，当我点击一个按钮时它会最小化。我使用了一个 Class 组件，我有一个状态来处理它。

如果true，侧边栏宽度为200px。如果false，就是70px。

render() {
    const SidebarStyled = styled.div`
      width: ${this.state.sidebarOpen ? '200px' : '70px'};
      position: fixed;
      left: 0px;
      top: 0px;
      height: 100vh;
      background-color: #0c1635;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

我想设置一个转换，但我不知道如何设置。我找到的唯一解决方案是使用功能组件，而我的客户只需要 class 个组件。

有什么帮助吗？

Answer 1

我猜，您正在创建一个 const SidebarStyled 并基于 state.sidebarOpen 决定 width 的值，但问题是样式已解析并应用于组件，并且它不会随着状态的改变而改变。我建议您创建两种样式 const，一种使用 width: 200px，另一种使用 70px，并基于 state.sidebarOpen 应用适当的样式 const。

CSS 随 State 变化时的过渡 - React

Transition when CSS change with State - React

css

reactjs

state

css-transitions