web-dev-qa-db-ja.com

角度ブートストラップ折りたたみテーブル行のアニメーションがスムーズに移行しない

角度ブートストラップの折りたたみディレクティブとCSSで問題が発生しています。基本的に、ディレクティブ「collapse」をdivに追加すると、正常に機能します。しかし、テーブルの行を展開/折りたたむと、遷移効果にいくつかの問題があるようです。

HTML：

<div ng-controller="dogCtrl">
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Breed</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="dog in dogs">
        <td><a href="#" ng-click="isCollapsed = !isCollapsed">{{dog.name}}</a></td>
        <td>{{dog.breed}}</td>
      </tr>
      <tr collapse="isCollapsed" ng-repeat-end="">
        <td colspan="3">
          <h3>Pet details</h3>
          <p>some details about this pet.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

コントローラ：

var app = angular.module('dogApp', ['ui.bootstrap']);
app.controller('dogCtrl', function($scope) {
    $scope.isCollapsed = true;
    $scope.dogs = [
        {
            name: "Sparky",
            breed: "Parson Russell Terrier"
        }, {
            name: "Shep",
            breed: "German Shepard"
        }
    ];
});

コードペンの例： http://codepen.io/anon/pen/qEoOBq

angularjstwitter-bootstrapangularjs-directiveangular-bootstrap
10
codeMonkey

テーブルセルの高さは「コンテンツに必要な最小の高さ」であるため（CSS 2.1のルールのように）、テーブルの行の高さをアニメーション化することはできないと思います。

おそらく回避策には、セルのコンテンツをdiv要素にラップし、このコンテナーもアニメーション化することが含まれます。

これは私にとってはうまくいきましたが、私はあまりテストしていません：

      <tr ng-repeat-end="">
        <td colspan="2" style="padding: 0">
          <div collapse="isCollapsed">
            <h3>Pet details</h3>
            <p>some details about this pet.</p>                
          </div>
        </td>
      </tr>
10
Paulo Scardine

angularテーブル行のアニメーション。 https://github.com/twbs/bootstrap/issues/1259 の既知の問題

それを行うための最良の方法が示されています ここ 。

<tr ng-click="row1Open = !row1Open">
      <td>Acrylic (Transparent)</td>
      <td>{{row1Open}}</td>
      <td>foo</td>
    </tr>
    <tr class="collapse-row">
      <td>
        <div collapse="!row1Open">
          <div class="collapse-cell">
            Detail Row {{demo.hello}}
          </div>
        </div>
      </td>
      <td>
        <div collapse="!row1Open">
          <div class="collapse-cell">
            abc
          </div>
        </div>
      </td>
      <td>
        <div collapse="!row1Open">
          <div class="collapse-cell">
            $2.90
          </div>
        </div>
      </td>
    </tr>
0
Manas