动画扩展/收缩表答案

【问题标题】：Animate expanding/contracting table动画扩展/收缩表
【发布时间】：2016-07-07 18:33:43
【问题描述】：

现在，下面的代码显示了一个表格，其中包含在单击时展开/收缩的行。我希望每一行在单击时动画其内容向下和向上滑动。我该怎么做？

function MyCtrl($scope) {
  $scope.environment_service_packages = 
    [
      {name: 'Click to expand', info: {text: 'some extra info', show: false}},
      {name: 'obj2', info: {text: 'some extra info for obj2', show: false}},
    ];
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <table ng-controller="MyCtrl" class="table table-hover table-striped">
    <tr class="info">
      <td>...</td>
    </tr>
    <tbody ng-repeat="x in environment_service_packages">
      <tr ng-click="x.info.show = !x.info.show">
        <td> {{ x.name }}
      </tr>
      <tr ng-show="x.info.show">
        <td>
          {{ x.info.text }}
        </td>
      </tr>
    </tbody>
  </table>
</body>

【问题讨论】：

标签： javascript jquery angularjs html-table expand

【解决方案1】：

试试这个。我刚刚添加了一个淡入淡出。尝试一些其他效果，看看它是否有效。
礼貌这个很棒的库 (animate.css)[https://daneden.github.io/animate.css/]

function MyCtrl($scope) {
  $scope.environment_service_packages = [{
    name: 'Click to expand',
    info: {
      text: 'some extra info',
      show: false
    }
  }, {
    name: 'obj2',
    info: {
      text: 'some extra info for obj2',
      show: false
    }
  }, ];
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />

<body ng-app>
  <table ng-controller="MyCtrl" class="table table-hover table-striped">
    <tr class="info">
      <td>...</td>
    </tr>
    <tbody ng-repeat="x in environment_service_packages">
      <tr ng-click="x.info.show = !x.info.show">
        <td>{{ x.name }}
      </tr>
      <tr ng-show="x.info.show" class="animated fadeIn">
        <td>
          {{ x.info.text }}
        </td>
      </tr>
    </tbody>
  </table>
</body>

【讨论】：

如何让文本和表格的其余部分向下滑动？
为此，您可以使用 ng-class 并根据条件向它们添加特定的动画样式。就像我猜你会想在展开/折叠时上滑或下滑