Question

当我的Bootstrap 3.3.7导航栏从页面顶部滚动时崩溃时，我在制作动画时遇到了一些麻烦。如果我在BrowserSync处于活动状态时在Sublime中更改导航栏中其他div的大小，它将显示动画但在滚动时仍然不起作用。我遵循的例子是：

http://jsfiddle.net/Filo/m7yww8oa/

使用我现有的大部分代码重新创建问题：

  <nav class="navbar navbar-default navbar-fixed-top">
    <div>
      <div class="navbar-header" id="header">
        <button id="navbarToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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>
        <div class="navbar-brand" id="title"><img id="logo" src="images/logo.jpg" /></div>
      </div>

      <div class="collapse navbar-collapse" id="collapsable-nav">
        <ul id="nav-list" class="nav navbar-nav navbar-right visible-xs visible-sm visible-md visible-lg">
          <li><a href="about.html">About US<br><i class="fas fa-users visible-md visible-lg"></i></a></li>
          <li><a href="why.html">Why Us<br><i class="fas fa-question-circle visible-md visible-lg"></i></a></li>
          <li><a href="contact.html">Contact<br><i class="fas fa-envelope visible-md visible-lg"></i></a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
  </nav>
</header>

<div class="container-fluid" id="main">
  <img src="images/goldwire1.jpg" id="goldwire1" />
</div>
<div class="container" id="services">
</div>
<div class="container" style="margin-top: 100px;">
  <div class="fifty" style="float: right;"><img src="images/probe.jpg" id="probe"></div>
</div>
<div class="info" style="color: #f5f5dc; background-color: #003366;">
</div>
<script src="script.js"></script>

https://jsfiddle.net/7rqv3m8r/

我似乎无法弄清楚为什么我的动画无法播放。我可以在我的开发工具中看到，一旦我滚动顶部并且webkit动画处于活动状态，就会添加.shrink。感谢您的帮助，感谢您抽出时间来查看。

Bootstrap Navbar不会播放动画

0 个答案: