title: angular-bootstrap collapse table row animation not transitioning smoothly
body: <p>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.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="dogCtrl"&gt;
    &lt;table class="table"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Breed&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr ng-repeat-start="dog in dogs"&gt;
          &lt;td&gt;&lt;a href="#" ng-click="isCollapsed = !isCollapsed"&gt;{{dog.name}}&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;{{dog.breed}}&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr collapse="isCollapsed" ng-repeat-end=""&gt;
          &lt;td colspan="3"&gt;
            &lt;h3&gt;Pet details&lt;/h3&gt;
            &lt;p&gt;some details about this pet.&lt;/p&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>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"
          }
      ];
  });
  </code></pre>
  
  <p>Codepen Example: <a href="http://codepen.io/anon/pen/qEoOBq">http://codepen.io/anon/pen/qEoOBq</a></p>