jquery - 侧栏应以与滑入相同的方式滑出

的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.当关闭叠加时，边栏滑动得太快-这是不正确的。

侧栏应以相同的动作滑入和滑出（请参见上面的过渡CSS）。我尝试将过渡添加到.sidePanelOpen .sidebar-panel {}，但是在单击叠加时，边栏仍然滑出得太快。

如何使侧边栏以相同的动作滑入和滑出？

最佳答案

实际上，它们是相同的，但您不会注意到，因为easeOutExpo提供了快速启动和慢速结束的功能。改为使用easyInOutExpo和以下数组：

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

单击here进行更新的小提琴。您现在所要做的就是在播放时设定时间。

关于jquery - 侧栏应以与滑入相同的方式滑出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24760799/