jquery - 侧边栏应该以与滑入相同的 Action 滑出

Question

CSS

#overlay{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    z-index:-1;
    opacity: 0;
    visibility:hidden;
    -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
         -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
}
.sidePanelOpen #overlay{
    opacity:1;
    visibility:visible;
    z-index: 9000;
}

.sidebar-panel{
    width: 440px;
    position: fixed;
    top: 0;
    bottom: 0;
    right:-100%;
    background: #f9f9f9;
    padding: 35px;
    z-index: 9100;
    overflow-y: auto;
  -webkit-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
     -moz-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
       -o-transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000);
          transition: all 1000ms cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo */
  -webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
     -moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
       -o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
          transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); /* easeOutExpo
}
.sidePanelOpen .sidebar-panel{
    right:0;
}

JQuery

$('.icon-btn').on('click', function() {
    $('body').addClass('sidePanelOpen');

});
$('#overlay').on('click', function() {
    $('body').removeClass('sidePanelOpen');
});

HTML

<div class="sidebar-panel">
  <div>
    <div style="border: 1px solid #eee;">
      test
    </div>
  </div>
</div>

DEMO Jsfiddle

问题是:1.点击图标时，侧边栏会缓慢滑动 - 正确为过渡2. close overlay时，侧边栏滑出速度过快 - 这是不正确的。

侧边栏应该以相同的 Action 滑入和滑出(参见上面的过渡 CSS)。我试图将过渡添加到 .sidePanelOpen .sidebar-panel{} 但在点击叠加时，侧边栏仍然滑出太快。

如何让侧边栏以相同的 Action 滑入和滑出？

Answer 1

实际上它们是相同的，但您不会注意到它，因为 easeOutExpo 提供快速开始和缓慢结束。使用 easeInOutExpo 代替数组:

cubic-bezier(1, 0, 0, 1);

点击here去更新的 fiddle 。您现在应该做的就是随意设置时间。