애니메이션 확대/축소 테이블

아래 코드는 클릭 할 때 확장/축소되는 행이있는 테이블을 보여줍니다. 클릭 할 때 각 행에서 아래로 슬라이딩하여 내용을 애니메이션으로 만들 싶습니다. 어떻게해야합니까?애니메이션 확대/축소 테이블

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를 사용하고 조건에 따라 특정 애니메이션 스타일을 추가 할 수 있습니다. 나는 당신이 slideUp 또는 slideDown을 확장/축소 할 때 원하는 것처럼 생각합니다. – Srijith

답변

관련 문제