jquery - 我的 CSS 过渡仅在一个方向上起作用

Question

我有一个动画来缩小我的导航栏，但它只在收缩时起作用，而在通过 jQuery 删除 .shrink 时不起作用；它立即变大，没有任何动画。为什么？

如果我将 .navbar 和 .navbar.shrink 中的 min-height 更改为 height选择器，它会起作用。但我需要使用 min-height。

CSS 更少:

.navbar{
  min-height: 128px;
  -webkit-transition:  1s;
  -moz-transition: 1s;
  transition: 1s;
 }

.navbar.shrink{
  min-height: 64px;
  -webkit-transition:  1s;
  -moz-transition: 1s;
  transition: 1s;
 }

jQuery:

$(function(){
 var shrinkHeader = 300;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= shrinkHeader ) {
           $('.header').addClass('shrink');
        }
        else {
            $('.header').removeClass('shrink');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});

HTML:

<div class="header">
  <h1>AnimateFixed Header (Scroll Down)</h1>
</div>
<div class="content">
</div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Answer 1

它可以工作，但你需要相应地修改你的动画

http://codepen.io/anon/pen/PwQqGJ

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #cc5350;
    color:#fff;
    z-index: 1000;
    min-height: 200px;
    overflow: hidden;
    -webkit-transition: min-height 1s;
    -moz-transition: min-height 1s;
    transition: min-height 1s;
    text-align:center;

}
.header.shrink {
    min-height: 100px;
}

如果您更改为使用 min-height，那么您需要确保动画 min-height 而不是高度。

如果您错过了，它是 transition: min-height 1s; 而不是 transition: height 1s;