Question

请你看一下this example，让我知道为什么我的布局无法顺利滑动？我的意思是当幻灯片捕获内部井（.login）时会跳跃。

<div class="container">
    <div class="row top">
        <div class="well well-sm col-md-2 col-md-offset-10"><a id="login">Login</a> | Register <i class="glyphicon glyphicon glyphicon-info-sign pull-right"></i>
           <div class="well login"></div>
        </div>
    </div>
</div>

<script>
$("#login").click(function () {
    $(".login").slideToggle();
});
</script>

，CSS是：

.login {
    display:none;
    -webkit-transition: max-height 0.6s ease-out;
    -moz-transition: max-height 0.6s ease-out;
    -o-transition: max-height 0.6s ease-out;
    transition: max-height 0.6s ease-out;
}

由于

Answer 1

您看到的问题是由bootstrap.css中的min-height样式引起的。最小高度使井不会坍塌超过20px。当井膨胀时，它实际上立即显示20px的高度。然而，这种奇怪的行为在崩溃时才真正引人注目。

.well {
  min-height: 20px;  <--- THIS STYLE
  padding: 19px;
  margin-bottom: 20px;
  background-color: @well-bg;
  border: 1px solid @well-border;
  border-radius: @border-radius-base;
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

您可以使用更具体的选择器指定最小高度或将类应用于井。

我只是在井中应用了一个更具体的选择器，因此它会覆盖BootStrap.css中的选择器。

div .well
{
 min-height:initial;   
}

http://jsfiddle.net/Ej72d/

虽然有效，但我建议将另一个类应用于名为wellNoMinHeight

的井道

.well.wellNoMinHeight
{
 min-height:initial;   
}

http://jsfiddle.net/TM2J3/

Answer 2

我认为问题在于它试图向下滑动div，但是div的形状很笨拙（因为井级）。这是我的解决方案，使用jquery animate而不是slidetoggle

http://jsfiddle.net/pmalbu/52VtD/4344/

以下是我使用的JavaScript：

var flip = 0;

$("#login").click(function () {
    if (flip++ % 2 === 0) {
        $( ".login" ).animate({
        'display': 'block',
        'margin-top': "20px"
      }, 300 );
        $( ".login" ).show(200); 
    }
    else {
         $( ".login" ).hide(200);
        $( ".login" ).animate({
        'display': 'block',
        'margin-top': "0"
      }, 300 ); 
    }
});

平滑切换滑动问题（向上）

2 个答案: