açısal önyükleme çökmesi tablo satırı animasyonu sorunsuz geçiş değil

Question

Açısal önyükleme çökme yönergesi ve CSS ile bir sorunla karşılaşıyorum. Temel olarak, "çökme" direktifini bir div'a eklediğinizde, iyi çalışır. Ancak bir tablo satırını genişletmeye/daraltmaya çalıştığınızda, geçiş efektiyle ilgili bazı sorunlar var gibi görünüyor.

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> 

Kontrol:

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 Örnek: http://codepen.io/anon/pen/qEoOBq

Answer 1

Tablo hücresi yüksekliği “içeriği ile gereken minimum yükseklik” (deki gibi olduğu CSS 2.1 kuralları) Sanırım tablo satır yüksekliğini canlandıramazsınız.

Muhtemelen geçici çözüm, hücrenin içeriğini bir div öğeye sarmayı ve bu kabı da canlandırmayı içerir.

Bu

benim için çalıştı ama ağır test etmedim:

 <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

Onun tablo satırları üzerinde açısal animasyonlar için bilinen bir sorundur. https://github.com/twbs/bootstrap/issues/12593

Bunu yapmanın en iyi yolu here olarak gösterilmektedir.

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