कोणीय-बूटस्ट्रैप पतन तालिका पंक्ति एनीमेशन आसानी से संक्रमण नहीं कर रहा है

Question

मैं कोणीय-बूटस्ट्रैप संकुचन निर्देश और सीएसएस के साथ किसी समस्या में भाग रहा हूं। असल में जब आप एक 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" 
     } 
    ]; 
}); 

Codepen उदाहरण: http://codepen.io/anon/pen/qEoOBq

Answer 1

के बाद से एक तालिका सेल की ऊंचाई में "के रूप में कम से कम सामग्री के लिए आवश्यक ऊंचाई" (है सीएसएस 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> 

Answer 2

इसके तालिका पंक्तियों पर कोणीय एनिमेशन के लिए एक ज्ञात समस्या। https://github.com/twbs/bootstrap/issues/12593

ऐसा करने का सबसे अच्छा तरीका 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>