使用 Vanilla CSS 和样式化组件 React 组件渲染转换

【问题标题】：React Component Render Transitions with Vanilla CSS & Styled Components使用 Vanilla CSS 和样式化组件 React 组件渲染转换
【发布时间】：2022-01-27 08:51:06
【问题描述】：

每当我使用 vanilla CSS（在样式化组件中）渲染 React 组件时，我正在尝试找出一种添加过渡的方法。我知道有一个叫做 React Transition Group 的依赖，但我希望尽可能地避免依赖。

我想在我的移动侧边菜单中添加一个垂直显示过渡，当点击汉堡图标时它会向下展开。

这是我迄今为止的一个例子：Menu Picture

【问题讨论】：

标签： javascript css reactjs css-transitions styled-components

【解决方案1】：

您可以根据状态值在样式属性中设置菜单的高度，并为您的样式化组件添加过渡时间。

const Menu = styled.div`
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 1;
  transition: 300ms;
  overflow: hidden;
  height: 100px;
`

function NavBar(_props) {

  const [showMenu, setShowMenu] = useState(false)

  return (
    <div>
      <button onClick={() => setShowMenu(!showMenu)}>
        <img src={MenuIcon} />
        <Menu style={{ height: showMenu ? 100 : 0 }}>
          {/* You can add your menu items here */}
        </Menu>
      </button>
    </div>
  );
}

【讨论】：

谢谢！那行得通。我忘了包括溢出部分。