使用 Bootstrap 制作用于折叠 <tr> 的动画

Question

所以，我有一个引导表：

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

当我折叠该行时，它只会出现在“更多”链接所在的行下方。但我需要动画存在。我也尝试将过渡添加到 css 规则，但似乎没有任何效果。有没有办法用动画制作折叠？

Answer 1

给出的答案实际上并未提供正确的解决方案。这是一个解决方案，但是当您需要保留tr和td元素时，此解决方案更完整

事实是，引导程序无法为tr td元素设置动画。您可以做的不是切换trortd是创建一个divorspan元素，您将在其中添加所有内容，然后为该元素设置动画。

正如你所看到的，它看起来和你有一张实际的桌子一样

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