如何向导航栏添加过渡？

Question

我正在查看一些网站，并看到一个带有过渡导航栏的网站。所以我也开始尝试为其添加过渡，但到目前为止还没有成功。

我的导航栏：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- 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><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

JQuery 检查是否有滚动并添加 CSS：

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 10) {
        $(".navbar-fixed-top").css({
           'background-color' : 'white',
           'transition' : '2.3'
        });
    } else {
      $(".navbar-fixed-top").css("background-color", "transparent");
    }
  });
});

一些额外的 CSS：

.navbar{
      background:transparent;
      border-color: transparent;
      transition: 2.3;
    }

如果您知道我做错了什么并知道解决方案，您能否解释一下我实际上做错了什么？

提前致谢！

Answer 1

问题是您错过了转换时的秒数 s（在 CSS 和 JS 中）。

只需添加它，然后它就会起作用：

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 10) {
        $(".navbar-fixed-top").css({
           'background-color' : 'blue',
           'transition' : '2.3s'
        });
    } else {
      $(".navbar-fixed-top").css("background-color", "transparent");
    }
  });
});

.navbar{
background:transparent;
border-color: transparent;
transition: 2.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- 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><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>