带有 ui bootstrap 和水平折叠的生涩动画答案

【问题标题】：Jerky animation with ui bootstrap and horizontal collapse带有 ui bootstrap 和水平折叠的生涩动画
【发布时间】：2017-03-17 17:02:42
【问题描述】：

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

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;
}

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

【问题讨论】：

标签： angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

看起来像库的错误。我在引导演示页面上获得了same behavior。不太明显，因为它们的缓动速度更快，但它就在那里。您的解决方法似乎是一个很好的临时解决方案。

【讨论】：

对代码的一些挖掘使我发现它正在将宽度从 0 设置为 scrollWidth 并且该值对于折叠的最终宽度不正确。我发现它也可以用于垂直折叠。然后在完成该转换时将宽度（或高度）设置为auto，因此跳转。他们怎么会认为这会奏效？
这是 UI-Bootstrap 的已知问题。他们用以下警告更新了他们的页面：当使用该指令的水平属性时，CSS 可以在折叠元素从 0px 变为所需的结束宽度时重排，这可能导致高度变化。这可能会导致动画似乎无法运行。解决这个问题的最好方法是通过 CSS 在水平折叠元素上设置一个固定的高度，这样就不会发生这种情况，并且动画可以按预期运行。