What transition must be applied so that sidebar appear to move in from left? Transition value: all 0.2s ease I could have done it by making width : 100% and zero on click, but looking for alternatives. So, basically my query is when I click on hamburger menu sidebar should apparently move from left to right.

https://codepen.io/TA0011/pen/QWrvzYe

//for sidebar
const sidebar = document.querySelector('#mySidebar')

const toggle = document.querySelector('#sidebar-toggle')

toggle.addEventListener('click', toggleSidebar)

function toggleSidebar(e) {
  toggle.classList.toggle('open')
  sidebar.classList.toggle('open');
}
//for sidebar

*{
  margin:0;
  padding:0;
  list-style:none;
  box-sizing:border-box;
  text-decoration:none;
}
#sidebar-toggle{
  display: inline-block;
  cursor: grab;
  background: rgba(0, 136,169, 1);
  border-radius: 50%;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  margin-top: 5px;
}
#sidebar-toggle div{
  width: 20px;
  height: 2px;
  background-color: #fff;
  margin: 6px 0;
  transition: all 0.3s ease 0s;
  cursor: grab;
}
#sidebar-toggle.open .bar4 {
  transform: translate(0, 8px) rotate(-45deg);
}

#sidebar-toggle.open .bar5 {
  opacity: 0;
}

#sidebar-toggle.open .bar6 {
  transform: translate(0px, -8px) rotate(45deg);
}

.sidebar {
  display:none;
  position: fixed;
  height: 100vh;
  top: 50px;
  left: 0;
  background-color: #fff;
  width: 15.625rem;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
}
.open.sidebar {
  display: flex;
}
.sidebar-nav{
  position: absolute;
  margin: 0 0 0;
  width: 100%;
  padding:  5px 10px;
}
.sidebar-nav ul{
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: flex-start;
}
.sidebar-nav ul li {
  padding: 10px;
  color: #007bff;
  display: flex;
  flex-direction: column;
}
.sidebar-nav ul li:hover{
   background: #007bff;
   color: #fff;
}

.sidebar-nav ul li a .icon{
  color:#007bff;
  width:30px;
  display: inline-block;
}
.sidebar-nav .down_key{
    margin-left: 50px;
}
.sidebar-nav ul li ul li{
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
}

<div id="sidebar-toggle">
            <div ></div>
            <div ></div>
            <div ></div>
        </div> 
<div  id='mySidebar'>
  <div >
        <ul>
            <li>
                <a href="">
                    <span ><i ></i></span>
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="">
                    <span ><i ></i></span>
                    <span>Feed</span>
                </a>
            </li>
            <li>
                <a href="" >
                    <span ><i ></i></span>
                    <span>Compose</span>
                    <span ><i ></i></span>
                    <ul >
                        <li><a href="">Email</a></li>
                    </ul>
                </a>
            </li>
        </ul>
    </div>
</div>

CodePudding user response：

//for sidebar
const sidebar = document.querySelector('#mySidebar')

const toggle = document.querySelector('#sidebar-toggle')

toggle.addEventListener('click', toggleSidebar)

function toggleSidebar(e) {
  toggle.classList.toggle('open')
  sidebar.classList.toggle('open');
}
//for sidebar

*{
  margin:0;
  padding:0;
  list-style:none;
  box-sizing:border-box;
  text-decoration:none;
}
#sidebar-toggle{
  display: inline-block;
  cursor: grab;
  background: rgba(0, 136,169, 1);
  border-radius: 50%;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  margin-top: 5px;
}
#sidebar-toggle div{
  width: 20px;
  height: 2px;
  background-color: #fff;
  margin: 6px 0;
  transition: all 0.3s ease 0s;
  cursor: grab;
}
#sidebar-toggle.open .bar4 {
  transform: translate(0, 8px) rotate(-45deg);
}

#sidebar-toggle.open .bar5 {
  opacity: 0;
}

#sidebar-toggle.open .bar6 {
  transform: translate(0px, -8px) rotate(45deg);
}

.sidebar {
  transition: 4s, opacity 0.5s linear;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  position: fixed;
  height: 100vh;
  top: 50px;
  left: 0;
  background-color: #fff;
  width: 15.625rem;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
}
.open.sidebar {
  visibility: visible;
  opacity: 1;
  display:flex;
}
.sidebar-nav{
  position: absolute;
  margin: 0 0 0;
  width: 100%;
  padding:  5px 10px;
}
.sidebar-nav ul{
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: flex-start;
}
.sidebar-nav ul li {
  padding: 10px;
  color: #007bff;
  display: flex;
  flex-direction: column;
}
.sidebar-nav ul li:hover{
   background: #007bff;
   color: #fff;
}

.sidebar-nav ul li a .icon{
  color:#007bff;
  width:30px;
  display: inline-block;
}
.sidebar-nav .down_key{
    margin-left: 50px;
}
.sidebar-nav ul li ul li{
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
}

<div id="sidebar-toggle">
            <div ></div>
            <div ></div>
            <div ></div>
        </div> 
<div  id='mySidebar'>
  <div >
        <ul>
            <li>
                <a href="">
                    <span ><i ></i></span>
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="">
                    <span ><i ></i></span>
                    <span>Feed</span>
                </a>
            </li>
            <li>
                <a href="" >
                    <span ><i ></i></span>
                    <span>Compose</span>
                    <span ><i ></i></span>
                    <ul >
                        <li><a href="">Email</a></li>
                    </ul>
                </a>
            </li>
        </ul>
    </div>
</div>

You can figure out the styling, but here is a working solution, you cannot add a transition to a display:none, you need to use visibility and opacity instead

CodePudding user response：

Use transform:translateX(-250px) to do the animation

#mySidebar{
  transition:0.2s;
  transform:translateX(-250px)
}
#mySidebar.open{
  transform:translateX(0)
}

https://codepen.io/Guichi/pen/dyewaPP