必须应用什么转换才能使侧边栏轻松地从左向右移动0.2s

Question

必须应用什么转换才能使侧边栏看起来从左移？转换值：all 0.2s ease我本可以通过使宽度为100%并在点击时为零来完成，但正在寻找替代方案。所以，基本上，我的查询是当我点击汉堡菜单侧边栏时，应该明显地从左向右移动。

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 class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div> 
<div class="sidebar" id='mySidebar'>
<div class="sidebar-nav">
<ul>
<li>
<a href="">
<span class="icon"><i class="fas fa-home"></i></span>
<span>Home</span>
</a>
</li>
<li>
<a href="">
<span class="icon"><i class="fas fa-file-medical-alt"></i></span>
<span>Feed</span>
</a>
</li>
<li>
<a href="" class="feat-btn">
<span class="icon"><i class="fas fa-feather-alt"></i></span>
<span>Compose</span>
<span class="down_key"><i class="fas fa-chevron-down"></i></span>
<ul class="feat-show">
<li><a href="">Email</a></li>
</ul>
</a>
</li>
</ul>
</div>
</div>

Answer 1

使用transform:translateX(-250px)进行动画

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

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

Answer 2

//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 class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div> 
<div class="sidebar" id='mySidebar'>
<div class="sidebar-nav">
<ul>
<li>
<a href="">
<span class="icon"><i class="fas fa-home"></i></span>
<span>Home</span>
</a>
</li>
<li>
<a href="">
<span class="icon"><i class="fas fa-file-medical-alt"></i></span>
<span>Feed</span>
</a>
</li>
<li>
<a href="" class="feat-btn">
<span class="icon"><i class="fas fa-feather-alt"></i></span>
<span>Compose</span>
<span class="down_key"><i class="fas fa-chevron-down"></i></span>
<ul class="feat-show">
<li><a href="">Email</a></li>
</ul>
</a>
</li>
</ul>
</div>
</div>

你可以弄清楚样式，但这里有一个有效的解决方案，你不能向显示器添加转换：没有，你需要使用可见性和不透明度来代替