我在粘性菜单上遇到动画问题。 CSS已更改,但不会更改。有谁知道为什么?
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.navbar-fixed-top').addClass("navbar-fixed-top-sticky");
} else {
$('.navbar-fixed-top').removeClass("navbar-fixed-top-sticky");
}
});
和CSS:
.navbar-fixed-top {
transition: 0.3 all ease;
-webkit-transition: 0.3 all ease;
}
.navbar-fixed-top.navbar-fixed-top-sticky {
background: #601a36;
height: 80px;
transition: 0.3 all ease-in-out;
-webkit-transition: 0.3 all ease-in-out;
}
答案 0 :(得分:1)
您需要在时间后添加unit
。 0.3
无效,必须为0.3s
或300ms
。然后background-color
会有效,但对于height
转换,您还需要在.navbar-fixed-top
css类中添加默认值。
$(window).scroll(function() {
if( $(this).scrollTop() > 50 ) {
$('.navbar-fixed-top').addClass("navbar-fixed-top-sticky");
} else {
$('.navbar-fixed-top').removeClass("navbar-fixed-top-sticky");
}
});

/* --- just for demo --- */
.navbar-fixed-top {
position: fixed;
width: 100%;
line-height: 20px;
background: #ccc;
}
.navbar-fixed-top-sticky {
line-height: 80px;
}
.content {
height: 1000px;
}
/* --- just for demo --- */
.navbar-fixed-top {
height: 20px; /* default height */
transition: 0.3s all ease; /* added unit */
-moz-transition: 0.3s all ease; /* added unit */
-webkit-transition: 0.3s all ease; /* added unit */
}
.navbar-fixed-top-sticky {
background: #601a36;
height: 80px;
transition: 0.3s all ease-in-out; /* added unit */
-moz-transition: 0.3s all ease-in-out; /* added unit */
-webkit-transition: 0.3s all ease-in-out; /* added unit */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-fixed-top">.navbar-fixed-top</div>
<div class="content"></div>
&#13;
答案 1 :(得分:-1)
您没有发生转换的原因是因为您没有为其转换定义初始属性。试试这个。
.navbar-fixed-top {
transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
background-color: transparent;
height: 0;
}
.navbar-fixed-top.navbar-fixed-top-sticky {
background-color: #601a36;
height: 80px;
}
希望有效!
答案 2 :(得分:-3)
这应该解决它。保留CSS,只排除transition
部分。
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.navbar-fixed-top').addClass("navbar-fixed-top-sticky").fadeIn('slow');
} else {
$('.navbar-fixed-top').removeClass("navbar-fixed-top-sticky").fadeOut('slow');
}
});
或者您可以尝试添加时间单位,就像您应该transitions
:
.navbar-fixed-top {
transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
}
.navbar-fixed-top.navbar-fixed-top-sticky {
background: #601a36;
height: 80px;
transition: 0.3s all ease-in-out;
-webkit-transition: 0.3s all ease-in-out;
}