アニメーション拡大/縮小テーブル

以下のコードは、クリックすると拡大/縮小する行を含むテーブルを示しています。私は、クリックすると内容を上下にスライドさせるように各行をアニメーション化します。これはどうすればいいですか？アニメーション拡大/縮小テーブル

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

これを試してみてください。私はfadeInを追加しました。いくつかの他のエフェクトを試してみてください
礼儀この素晴らしいライブラリ（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を使用し、条件に基づいて特定のアニメーションスタイルを追加することができます。私はあなたが/崩壊するときにslideUpやslideDownしたいと思うように – Srijith

アニメーション拡大/縮小テーブル

答えて

関連する問題