Question

为什么水平坍塌？它开始正常打开，停止一点，然后完全打开。此示例中的元素没有边距，也没有填充

https://plnkr.co/edit/85K7YhCG0inVpcwAhyjC?p=preview

编辑：如果我在内容上放置固定宽度（将ul设置为宽度400px），它会运行得更顺畅。这是唯一的方法吗？

HTML

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
  <nav class="navbar navbar-default" role="navigation" ng-init="nc=true;">
      <div class="navbar-header">
          <div class="uib-collapse" uib-collapse="nc" horizontal>
              <ul class="">
                  <li ng-repeat="menu in fm.genericMenus" class="" >
                      <a class="" href="" ng-href="{{menu.Url}}" ng-bind="menu.Text"></a>
                  </li>
              </ul>
          </div>

          <button type="button" class="navbar-toggle" ng-click="nc=!nc">
              <span class="sr-only">Toggle navigation</span>
              <span>Click</span>
          </button>

          <a href="#" class="logo">
              <img src="https://upload.wikimedia.org/wikipedia/bar/a/a6/Nintendo-Logo.svg" />
          </a>
      </div>
  </nav>
  </body>
</html>

CSS

.logo img {
  width:100px;
}

ul {
  padding:0;
}

li {
  display:inline-block;
  padding: 10px 5px;
}

a {
  font-size:8px;
}

.uib-collapse, button {
  float:right;
  height:50px;
}

button {
  margin:0 !important;
}

.collapsing {
  transition-duration:3s;
}

JS

var app = angular.module('app', ['ui.bootstrap', 'ngAnimate']);

app.controller('MainCtrl', function($scope) {
  $scope.fm = {
    genericMenus:[
        {Text:'CALENDAR'},
        {Text:'BUYING'},
        {Text:'SELLING'},
        {Text:'DEPARTMENTS'},
        {Text:'NEWS & VIEWS'}
      ]
  };
});

Answer 1

看起来像是图书馆的错误。我在bootstrap演示页面上获得same behavior。不太明显，因为他们有更快的缓和，但它在那里。您的解决方法似乎是一个很好的临时解决方案。

与ui bootstrap和水平崩溃的生涩动画

1 个答案: