折叠Bootstrap表行时缺少缓动效果

Question

我试图使用Bootstrap 3.2.0很好地折叠一些行，但似乎任何缓和过渡效果都会丢失。我知道这可能会起到挑剔的作用，但是有没有人对这是什么造成的？

标记的基本部分（所有js由bootstrap处理）如下所示：

<tr>
<td data-toggle="collapse" data-target=".row1"><span class="caret"></span>
Tywin LANNISTER
</td>
<td>100%</td>
<td>5.0</td>
</tr>
<tr class="collapse row1 warning">
<td>REBUILDING THE WALL</td>
<td>50%</td>
<td>5.0</td>
</tr>
<tr class="collapse row1 warning">
<td class="text-justify">WILDFIRE DISPOSAL</td>
<td>50%</td>
<td>5.0</td>
</tr>

我在这里附上了一个例子：http://jsfiddle.net/KC7UE/1