Make an animation for collapsing <tr> with Bootstrap

Question

So, I have a bootstrap table:

<table class="table">
   <tr class="content-row" id="content_1">
     <td><a id="more_1" class="more" role="button" data-toggle="collapse" href="#additional_row1" aria-expanded="false" aria-controls="collapseExample">More</a>
     </td>
   </tr>
   <tr class="collapse additional-row" id="additional_row1">
     <td class="additional-row-td">Content</td>
   </tr>
 </table>

When I collapse the row, it just appears below the row, where the 'More' link is. But I need the animation to be present. I also tried to add transition to css rule, but it seems it doesn't have any effect. Is there any way to make collapsing with animation?

Answer 1

The answer that was given wasn't actually providing the correct solution. It was a solution, but when you need to keep the tr and td elements this solution is more complete

The fact is that there is no way in bootstrap to animate tr td elements. What you can do is instead of toggling the tr or td is create a div or span element in which you are going to add all of your content and then there animate the element.

As you can see it looks the same as if you had an actual table

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>

<table class="table">
   <tr class="content-row" id="content_1">
     <td><a id="more_1" class="more" role="button" data-toggle="collapse" href="#additional_row1" aria-expanded="false" aria-controls="collapseExample">More</a>
     </td>
   </tr>
   <tr>
     <td class="additional-row-td">
       <div class="collapse additional-row" id="additional_row1">Content</div>
     </td>
   </tr>
 </table>