動畫擴展/縮小表

現在，下面的代碼顯示了一個包含點擊時展開/收縮的行的表格。我希望每行都能在點擊時將內容向下滑動。我該怎麼做呢？動畫擴展/縮小表

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

動畫擴展/縮小表

回答

相關問題