动画扩展/缩小表

现在，下面的代码显示了一个包含点击时展开/收缩的行的表格。我希望每行都能在点击时将内容向下滑动。我该怎么做呢？动画扩展/缩小表

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>

来源

2016-07-07 Jez

试试这个。我只是添加了淡入淡出。尝试一些其他效果，看看它的作品。
礼貌这真棒库（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>

来源

2016-07-07 03:49:28 Srijith

有关使文本和表格滑下的其余部分是什么？ – Jez

为此，您可以使用ng-class并根据条件为其添加特定的动画样式。就像我想你在展开/折叠时想要上移或下滑一样 – Srijith

动画扩展/缩小表

回答

相关问题