Question

我有一个缩小导航栏的动画，但它只适用于缩小，而不是通过jQuery删除.shrink时;没有任何动画，它会立即变大。为什么呢？

如果我在min-height和我的height选择器中将.navbar更改为.navbar.shrink，则可以使用。但我需要使用min-height。

CSS LESS：

.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;

Answer 2

我创建了一个JSFiddle示例：

<强> CSS：

.navbar {
     background-color:red;
     height: 128px;
     -webkit-transition: height 0.5s, margin-top 0.5s;
     -moz-transition: height 0.5s, margin-top 0.5s;
     -o-transition: height 0.5s, margin-top 0.5s;
     transition: height 0.5s, margin-top 0.5s;
}

.navbar.shrink {
    height: 64px;
    margin-top: -33px;
}

<强> HTML：

<div id="primary" class="navbar shrink">  Text </div>
<button id="btn">Add/remove class</button>

<强>使用Javascript：

function removeAdd(){
    if($("#primary").hasClass("shrink")){
         $("#primary").removeClass("shrink");
    } else {
         $("#primary").addClass("shrink");
    }  
}
$(document).ready(function(){
    $('#btn').click(removeAdd);
});

网址 http://jsfiddle.net/67xnkkk8/1/

这很有效。使用height代替min-height

我的CSS转换仅在一个方向上起作用

2 个答案: