How make a verticale smooth transition in CSS with react component? - css

Question

I try to make a smooth transition for my hamburger menu, but I don't find solution to do it... I'm not really fluid with the CSS and it's very difficult to find a good example on the web or a good tutorial to explain the process.
below my code, I hope it's enough simple to understand my problem.
a link to the project https://github.com/StanLepunK/cafe366/blob/stan/src/components/menu/menu_small.js
export const MenuSmallImpl = () => {
let res = Get_window();
const [width, set_width] = useState(res[0]/2);
const [open, set_open] = useState(false);
const toggleMenu = () => {
set_open(!open);
}
return (
<Fragment>
<div className={nav_bar}>
<button
onClick={() => toggleMenu()}
className={toggle_menu}
>
<div className={hamburger_container}>
<div className={hamburger}>
<div className={[burger, "burger1"].join(" ")} />
<div className={[burger, "burger2"].join(" ")} />
<div className={[burger, "burger3"].join(" ")} />
</div>
<style>{`
.burger1 {
transform: ${ open ? 'rotate(45deg)' : 'rotate(0)'};
}
.burger2 {
opacity: ${ open ? 0 : 1};
}
.burger3 {
transform: ${ open ? 'rotate(-45deg)' : 'rotate(0)'};
}
`}</style>
</div>
</button>
<div>{open ? <div className={show}><MenuContent /></div> : <div className={hidden}><MenuContent /></div> }</div>
</div>
</Fragment>
)
}
.nav_bar {
text-align: center;
border-radius: 0;
background-color: rgb(var(--orange_366_rgb));
transition: height 3s ease;
}
.nav_bar .show {
height: 100%;
overflow: visible;
}
.nav_bar .hidden {
height: 0;
overflow: hidden;
}
.nav_bar:active {
height: 100%;
overflow: visible;
}
.toggle_menu {
height: 50px;
width: 50px;
z-index: 1;
}
.hamburger_container {
display: flex;
justify-content: center;
align-items: center;
}
.hamburger{
width: 2rem;
height: 2rem;
display: flex;
justify-content: space-around;
flex-flow: column nowrap;
}
.burger{
width: 2rem;
height: 2px;
border-radius: 2px;
background-color: rgb(var(--lin_rgb));
transform-origin: 1px;
transition: all 0.3s linear;
}
CODE IMPROVED on the advice John Ruddell, but it's not enough, that's work but not totally only for the text not for the frame. See here use a small window to see the hamburger menu https://cafe366stan.gatsbyjs.io/
I don't understand why the text move and not the frame...
my new code
JS
import React, { useState, Fragment } from "react"
// CAFÉ 366
import MenuContent from "./menu_content"
import { nav_bar, toggle_menu, content_menu_small,
hamburger, burger, hamburger_container,
show, hidden } from "./menu_small.module.css";
// UTILS
import { Get_window } from "../../utils/canvas"
export const MenuSmallImpl = () => {
const [open, set_open] = useState(false);
const toggleMenu = () => {
set_open(!open);
}
return (
<Fragment>
<div style={{textAlign:`center`}}>
<button
onClick={() => toggleMenu()}
className={toggle_menu}
>
<div className={hamburger_container}>
<div className={hamburger}>
<div className={[burger, "burger1"].join(" ")} />
<div className={[burger, "burger2"].join(" ")} />
<div className={[burger, "burger3"].join(" ")} />
</div>
<style>{`
.burger1 {
transform: ${ open ? 'rotate(45deg)' : 'rotate(0)'};
}
.burger2 {
opacity: ${ open ? 0 : 1};
}
.burger3 {
transform: ${ open ? 'rotate(-45deg)' : 'rotate(0)'};
}
`}</style>
</div>
</button>
</div>
<div className={[nav_bar, "move"].join(" ")}>
{/* <div>{open ? <div className={show}><MenuContent /></div> : <div className={hidden}><MenuContent /></div> }</div> */}
<MenuContent />
</div>
<style>{`
.move {
transform: ${open ? 'translatey(0)' : 'translatey(-400px)'};
}
`}</style>
</Fragment>
)
}
export default function MenuSmall() {
return (
<MenuSmallImpl/>
)
}
CSS
.nav_bar {
height: 0%;
text-align: center;
border-radius: 0;
background-color: rgb(var(--orange_366_rgb));
transition: 1s ease;
/* border-right: 1px solid; */
}
.nav_bar .show {
height: 100%;
overflow: visible;
}
.nav_bar .hidden {
height: 0;
overflow: hidden;
}
.nav_bar:active {
height: 100%;
overflow: visible;
}
.toggle_menu {
height: 50px;
width: 50px;
z-index: 1;
/* border: solid 1px white; */
}
.hamburger_container {
display: flex;
justify-content: center;
align-items: center;
}
.hamburger{
width: 2rem;
height: 2rem;
display: flex;
justify-content: space-around;
flex-flow: column nowrap;
/* border: solid 1px white; */
}
.burger{
width: 2rem;
height: 2px;
border-radius: 2px;
background-color: rgb(var(--lin_rgb));
transform-origin: 1px;
transition: all 0.3s linear;
}
and two screenshots to understand my goal
now when it's deploy