React Component Render Transitions with Vanilla CSS & Styled Components-CodePudding

I am trying to figure out a way to add transitions whenever I render React components using vanilla CSS (within Styled Components). I know that there is a dependency called React Transition Group, but I hoping to avoid as many dependencies as possible.

I would like to add a vertical reveal transition to my mobile side menu that expands downward when clicking on the hamburger icon.

Here's an example of what I have thus far: Menu Picture

CodePudding user response：

You can set the height of the menu in the style attribute based on a state value and add a transition time to your styled component.

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