Angular-Bootstrap-Kollaps-Tabelle Reihe Animation nicht reibungslos

Question

Ich bin in ein Problem mit eckigen Bootstrap-Kollatierungsrichtlinie und CSS laufen. Grundsätzlich, wenn Sie die Anweisung "collapse" zu einem Div hinzufügen, funktioniert es gut. Aber wenn Sie versuchen, eine Tabellenzeile zu erweitern/zu reduzieren, scheint es einige Probleme mit dem Übergangseffekt zu geben.

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> 

Controller:

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

Codepen Beispiel: http://codepen.io/anon/pen/qEoOBq

Answer 1

Da die Höhe einer Tabellenzelle „die minimale Höhe, die durch den Inhalt erforderlich“ (wie in CSS 2.1-Regeln) Ich denke, Sie können die Höhe der Tabellenzeile nicht animieren.

Wahrscheinlich besteht die Problemumgehung darin, den Inhalt der Zelle in ein div-Element zu verpacken und diesen Container ebenfalls zu animieren.

Das ist für mich gearbeitet, aber ich habe nicht ausführlich getestet:

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

Answer 2

Es ist ein bekanntes Problem für Winkel Animationen auf Tabellenzeilen. https://github.com/twbs/bootstrap/issues/12593

Der beste Weg, es zu tun ist here gezeigt.

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