Question

HTML

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

JQuery的

 $('.icon-btn').on('click', function() {
        var offset = $(window).width() - 440;
        $('#overlay').addClass('overlay');
        $('.sidebar-panel').animate({
            'left': offset
        });

    });
    $('#overlay').click(function() {
        var offset = $(window).width() + 440;
        $(this).removeClass('overlay').delay(10000);
        $('.sidebar-panel').animate({
            'left': offset
        });
    });

CSS

.overlay{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9000;
  background-color: #000;
}

.sidebar-panel{
  width: 440px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(100% + 640px);
  background: #f9f9f9;
  padding: 35px;
  z-index: 9100;
  overflow-y: auto;

}

单击图标按钮时，它将显示叠加并从浏览器边缘向右滑动。问题是我对左边的计算可能不对。在测试浏览器时，点击图标btn后，幻灯片从左向右滑动。然后一次又一次尝试，它从右边正确滑动到右边的0。

还有一种方法可以让叠加和滑动面板同时关闭吗？

Jsfiddle 它似乎有效，但它只有safari的问题。

想要更改计算以在所有浏览器上正确显示该幻灯片。

更新

    .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 */
}

关闭侧边栏面板时，滑出太快。有没有办法以同样的过渡方式进出幻灯片？

Answer 1

这是一个基于class的解决方案，我发现它可以更好地运行浏览器（注意：这使用CSS3过渡而不是javascript动画）

<强> 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 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 .sidebar-panel{
    right:0;
}

<强> JS

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

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

你所做的只是添加和删除一个身体类，然后转换面板

JSFiddle Demo

PS。我很确定问题是你将定位应用于叠加层，而不是定位元素并只是切换它的可见性。见这里：http://jsfiddle.net/sNv2X/6/

在浏览器边缘从左向右滑动

1 个答案: