關於平滑切換滑動的問題（上）

您可以看看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; 
}

感謝

來源

2014-04-10 Suffii

你看到的是由bootstrap.css一個最小高度風格導致此問題。最小高度保持在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/

來源

2014-04-10 23:52:47 cgatian

感謝cgatian，這是完美的解釋！ – Suffii

很高興爲您服務。我喜歡那裏的CSS3動畫，真的很熱。 – cgatian

我認爲這個問題是，它試圖滑動下跌的股利，但是股市的形狀很尷尬（因爲井井有條）。這裏是我的解決方案，使用jQuery動畫代替的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); 
    } 
});

來源

2014-04-11 00:16:50 pmalbu

關於平滑切換滑動的問題（上）

回答

相關問題