React Component Render Transitions with Vanilla CSS & 样式化组件

Question

我正在尝试找出一种方法来在我使用 vanilla CSS（在 Styled Components 中）渲染 React 组件时添加转换。我知道有一个叫做 React Transition Group 的依赖，但我希望尽可能避免依赖。

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

这是我目前所拥有的示例：Menu Picture

Answer 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>
  );
}

React Component Render Transitions with Vanilla CSS & 样式化组件

React Component Render Transitions with Vanilla CSS & Styled Components

javascript

css

css-transitions

reactjs

styled-components