Question

我创建了一个向上滑动的登录/退出框，我认为有一种更聪明的方法可以做到这一点。我遇到的问题是，当框出现时，它会在主体上抛出一个垂直滚动条。这显然是预料之中的，但不会出现溢出：隐藏在身体上，我怎样才能更干净地做到这一点？

// show logout box    
$('.user').click(function() {
    $('.logout-box')
        .show()
        .animate({
            marginBottom: "0"
        }, 200, 'swing');
});

// Close logout box
$('.close-bar').click(function() {
    $('.logout-box').animate({
        marginBottom: "-=380px"
    }, 200, 'swing', function() {
        $('.logout-box').hide();
    });
});

Answer 1

不是为底部边距设置动画，而是以百分比为底部属性设置动画。这样，模态的高度并不重要。

<强> JS

$('.user').click(function() {
    $('.logout-box')
        .show()
        .animate({
            bottom: "0%"
        }, 200, 'swing');
});

// Close logout box
$('.close-bar').click(function() {
    $('.logout-box').animate({
        bottom: "-100%"
    }, 200, 'swing', function() {
        $('.logout-box').hide();
    });
});

<强> CSS

.logout-box {
  position: fixed;
  background: gray;
  display: none;
  left: 0;
  bottom: -100%;
  height: 380px;
  margin-bottom: 0;
  width: 100%;
  background: #000000;
}

如果您的模态总是从屏幕底部出现，您可以将位置更改为fixed而不是absolute，这也会消除滚动条。

Example Fiddle

Answer 2

使用高度而不是边距来制作动画。

// show logout box  
$('.user').click(function() {
  $('.logout-box')
    .show()
    .animate({
    height: "380px"
  }, 200, 'swing');
});
// Close logout box
$('.close-bar').click(function() {
  $('.logout-box').animate({
    height: 0
  }, 200, 'swing', function() {
    $('.logout-box').hide();
  });
});

DEMO

Answer 3

您可以使用css transition并切换.visible类，如下所示：

检查Fiddle

body { overflow:hidden }
.logout-box {
  position: absolute;
  background: gray;
  left: 0;
  bottom: 0;
  height: 380px;
  margin-bottom: -380px;
  width: 100%;
  background: #000000;
  opacity:0;
  transition:all 150ms ease-in-out;
}

.visible {
  margin-bottom:0;
  opacity:1;
}

更好的方法来做这个滑动面板？

3 个答案: