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.当紧密叠加时，侧边栏滑出太快 - 这是不正确的。

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

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

Answer 1

实际上它们是相同的，但您无法注意到它，因为easeOutExpo提供快速启动和慢速结束。使用easeInOutExpo而不是数组：

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

点击here以更新小提琴。你现在要做的就是在你开心的时候设定时间。

侧边栏应以与滑入相同的动作滑出

1 个答案: