Css3 Transition funktioniert nicht beim Expandieren

Question

Ich kann Css3 Transition verwenden, während ich ein Bootstrap-Navbar verkleinere, im folgenden Beispiel, aber beim Scrollen nach unten (re-expanding) kümmert sich die navbar nicht um den Übergang und springt einfach auf min-height: 80px; von min-height: 60px;

Können Sie sich bitte diese Demo anschauen und lassen Sie mich wissen, was ich falsch mache?

.navbar { 
 
    min-height: 80px; 
 
    transition: min-height 0.5s linear; 
 
} 
 
.navbar-brand { 
 
    padding: 0 15px; 
 
    height: 80px; 
 
    line-height: 80px; 
 
    transition: height 0.5s linear; 
 
    transition: line-height 0.5s linear; 
 
} 
 
.navbar-nav > li > a { 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
    line-height: 80px; 
 
    transition: line-height .5s linear; 
 
} 
 
.affix { 
 
    width: 100%; 
 
    top: 0px; 
 
    min-height: 60px; 
 
    transition: min-height 0.5s linear; 
 
} 
 

 
.affix .navbar-brand { 
 
    padding: 0 15px; 
 
    height: 60px; 
 
    line-height: 60px; 
 

 
} 
 
.affix .navbar-nav > li > a { 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
    line-height: 60px; 
 
    
 
} 
 
.container1 { 
 
    height: 2000px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="0"> 
 
    <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 

 
<div class="container1"></div>

Answer 1

Eine (oder mehrere) der Eigenschaften, die in Ihrem transition fehlt ändert.

In folgenden Beispiel habe ich es zu all zu zeigen, wie das aussieht, wenn ich Sie empfehlen stattdessen jede Eigenschaft aufzuschreiben, wie folgt aus:

transition: height 0.5s linear, line-height 0.5s linear; 

Wenn Sie das tun, überschreiben die letzte der ersten

transition: height 0.5s linear; 
transition: line-height 0.5s linear; 

.navbar { 
 
    min-height: 80px; 
 
    transition: all 0.5s linear; 
 
} 
 
.navbar-brand { 
 
    padding: 0 15px; 
 
    height: 80px; 
 
    line-height: 80px; 
 
    transition: all 0.5s linear; 
 
} 
 
.navbar-nav > li > a { 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
    line-height: 80px; 
 
    transition: all .5s linear; 
 
} 
 
.affix { 
 
    width: 100%; 
 
    top: 0px; 
 
    min-height: 60px; 
 
    transition: all 0.5s linear; 
 
} 
 

 
.affix .navbar-brand { 
 
    padding: 0 15px; 
 
    height: 60px; 
 
    line-height: 60px; 
 

 
} 
 
.affix .navbar-nav > li > a { 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
    line-height: 60px; 
 
    
 
} 
 
.container1 { 
 
    height: 2000px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="0"> 
 
    <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 

 
<div class="container1"></div>