引导程序中非常基本的崩溃

Question

我的代码工作正常，但是我缺少一个动画来使显示和隐藏表行的过渡更加平滑。

我不明白为什么引导程序不应用动画。

我在这里想念什么？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<table class="table" id="personal-data">
  <tbody>
    <tr>
      <a ng-if="!vm.generalData2Hidden" uib-tooltip="Hide" ng-click="vm.generalData2Hidden = true" data-toggle="collapse" href=".generalData2"><i class="glyphicon glyphicon-minus-sign"></i></a>
    </tr>
    <tr class="generalData2 collapse in">
      <td>Hello World</td>
    </tr>
    <tr class="generalData2 collapse in">
      <td>Hello World</td>
    </tr>
    <tr class="generalData2 collapse in">
      <td>Hello World</td>
    </tr>
    <tr class="generalData2 collapse in">
      <td>Hello World</td>
    </tr>
    <tr class="generalData2 collapse in">
      <td>Hello World</td>
    </tr>
    <tr class="generalData2 collapse in">
      <td>Hello World</td>
    </tr>
    <tr class="generalData2 collapse in">
      <td>Hello World</td>
    </tr>
  </tbody>
</table>