如何为侧边栏设置动画以使其从左侧滑入然后再次滑出至左侧

Question

我正在尝试在单击div时从左侧滑动边栏。然后单击“关闭”链接，然后使侧栏再次滑出，使其消失。 单击“开始”按钮然后关闭，然后再试一次，问题就不会出现。

这是CSS：

.draggable {
  border-radius:50%;
  width:100px;
  height:100px;
  line-height:100px;
  background-color:white;
  color:black;
  padding:10px 10px 10px 12px;
  cursor:pointer;
  position:relative; /* important (all position that's not `static`) */
  text-align:center;
  box-shadow:0px 3px 6px rgba(0, 0, 0, 0.25);
  animation: opacityIn 0.2s linear;
}

.draggable:active{
  background:black;
  color:white;
  transition:ease-in 0.3s, ease-out 0.3s;
  }



.sidebar{
  position:fixed;
  right: 0;
  width: 400px;
  height:100%;
  background-color: black;
  padding:15px;
}
#sidebarClick.is-closed{
 animation: fadeOut 0.3s linear forwards;
}
#sidebarClick.is-open{ 
   animation: fadeIn 0.3s linear forwards;
}


a{
  color:white;
}

#sidebarClick{
  display:none;
}

@keyframes fadeIn {
   from { 
     opacity: 0.1;
     transform: translateX(400px); }
   to   { 
     opacity: 1;
     transform: translateX(0px);}
}
@keyframes fadeOut {
   from { 
     opacity: 1;
     transform: translateX(0px); }
   to   { 
     opacity: 0;
     transform: translateX(400px);}
}

@keyframes opacityIn {
   from { 
     opacity: 0.1;}
   to   { 
     opacity: 1;}
}

JavaScript如下所示：

var draggableOnClick = document.getElementById('dragClick');
var sidebar = document.getElementById('sidebarClick');


draggableOnClick.onclick = function(){
  var flag = 0;

draggableOnClick.addEventListener("mousedown", function(){
  console.log("drag 2");
    flag = 0;
}, false);

draggableOnClick.addEventListener("mousemove", function(){
  console.log("drag 1");
    flag = 1;
}, false);

draggableOnClick.addEventListener("mouseup", function(){
    if(flag === 0){
      if (draggableOnClick.style.display === "none") {
        draggableOnClick.style.display = "block";
        sidebar.style.display = "none";
    } else {
        draggableOnClick.style.display = "none";
        sidebar.style.display = "block";
        sidebar.classList.toggle("is-open");
    }
    }
    else if(flag === 1){
        console.log("dragged");
    }
  flag = 0;
}, false);

};

sidebarClick.addEventListener ('click', function(){
  if (draggableOnClick.style.display === "none"){
        draggableOnClick.style.display = "block";
        sidebar.classList.toggle("is-closed");
        sidebar.classList.toggle("is-open");
    }
})

我想要的是，当触发“关闭”链接时，它应该隐藏侧边栏并将其滑到左侧。刚好相反。

我试图切换一个类，但这破坏了display：none逻辑的切换。

要查看它-这是一个代码笔： https://codepen.io/Njohansen/pen/eLadGm