angular-bootstrap collapse table row animation not transitioning smoothly

Question

I'm running into an issue with angular-bootstrap collapse directive and CSS. Basically when you add the directive "collapse" to a div it works fine. But when you try to expand/collapse a table row it seems to have some issues with the transition effect.

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

Answer 1

Since the height of a table cell is “the minimum height required by the content” (as in CSS 2.1 rules) I guess you can't animate the table row height.

Probably the workaround involves wrapping the content of the cell into a div element and animating this container as well.

This worked for me but I have not tested heavily:

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