animacja wiersza tabeli zwijania z kątem prostym nie przesuwa się płynnie

Question

Występuje problem z dyrektywą zwijania kątowego i CSS. Zasadniczo po dodaniu dyrektywy "zwiń" do elementu div działa poprawnie. Ale gdy próbujesz rozwinąć/zwinąć wiersz tabeli, wydaje się, że masz pewne problemy z efektem przejścia.

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> 

Kontroler:

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 przykład: http://codepen.io/anon/pen/qEoOBq

Answer 1

Ponieważ wysokość komórki tabeli jest „minimalna wysokość wymagane zawartości” (jak w Reguły CSS 2.1) Domyślam się, że nie można animować wysokości wiersza tabeli.

Prawdopodobnie obejście obejmuje zawijanie zawartości komórki do elementu div i animowanie tego kontenera.

Ten pracował dla mnie, ale ja nie testowałem mocno:

 <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

jego znany problem dla kątowych animacji w wierszach tabeli. https://github.com/twbs/bootstrap/issues/12593

Najlepszym sposobem na zrobienie tego jest wyświetlenie here.

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