带有ui引导和水平折叠的抖动动画

为什么横向塌陷会出现抖动?它开始正常打开，停了一会儿，然后完全打开。在这个例子中，元素没有边距，也没有内边距

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

预览编辑:如果我在内容上设置一个固定的宽度(设置ul为宽度400px)，它会运行得更流畅。这是唯一的办法吗?

<!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'} ] }; });

看起来像是库的一个bug。我在引导演示页面上得到相同的行为。不那么明显，因为他们有更快的放松，但它在那里。

相关内容

最新更新

热门标签：