Expand Collapse機能のCSS3移行の問題

Question

カテゴリと質問を設定してjsonをネストしました。 各カテゴリには、クリックカテゴリの行を展開/折りたたむ独自の一連の質問があります。 トグル機能はうまく機能しますが、どういうわけか、拡張と折りたたみの際にスムーズなCSSトランジションエフェクトを追加できません。 マイコード： HTML：

<div ng-app="app" ng-controller="customersCtrl"> 
<table class="table"> 
      <thead> 
       <tr> 
        <th width="60%">Name</th> 
      <th width="40%">Weight</th> 
     </tr> 
     </thead> 
     <tbody ng-repeat="x in names"> 
     <tr class="active cursor-pointer" ng-click="toggleCategory(x)"> 
      <td>{{x.Name}}</td> 
      <td>{{x.Weight}}</td> 
     </tr> 
     <tr ng-repeat="qs in x.questions" ng-hide="x.hidden" ng-class={slideUp: x.hidden, slideDown: !x.hidden}> 
      <td>{{qs.Name}}</td> 
      <td>{{qs.Weight}}</td> 
      </tr> 
     </tbody> 
</table> 

CSS：

.table { 
    width: 100%; 
    border-spacing: 0; 
    border-collapse: collapse; 
} 
.table thead th { 
    color: rgba(0, 0, 0, 0.54); 
    padding: 16px 8px; 
    font-size: 13px; 
    text-align: left; 
} 
.table tbody tr:hover { 
    background: #EEEEEE; 
} 
.table tbody tr:active, 
.table tbody tr.active { 
    background: #F5F5F5; 
} 
.table tbody td { 
    color: rgba(0, 0, 0, 0.87); 
    border-top: 1px rgba(0, 0, 0, 0.06) solid; 
    padding: 16px 8px; 
    font-size: 13px; 
} 
.cursor-pointer { 
    cursor: pointer; 
} 

.slideUp { 
    opacity: 0; 
    transition: opacity 0.4s ease-in; 
} 

.slideDown { 
    opacity: 1; 
    transition: opacity 0.4s ease-out; 
} 

はJavaScript：

var app = angular.module('app', ['ngMaterial']); 
app.controller('customersCtrl', function($scope) { 
    $scope.names = [ 
     { 
     "Name": "Category1", 
     "Weight": 0.33, 
     "questions": [{ 
      "Name": "Category1:- Question One", 
      "Weight": 0.19 
     }, { 
      "Name": "Category1:- Question Two", 
      "Weight": 0.38 
     }, { 
      "Name": "Category1:- Question Three", 
      "Weight": 0.43 
     }] 
     }, { 
     "Name": "Category2", 
     "Weight": 0.34, 
     "questions": [{ 
      "Name": "Category2:- Question One", 
      "Weight": 0.25 
     }, { 
      "Name": "Category2:- Question Two", 
      "Weight": 0.5 
     }, { 
      "Name": "Category2:- Question Three", 
      "Weight": 0.25 
     }] 
     }, { 
     "Name": "Category3", 
     "Weight": 0.33, 
     "questions": [{ 
      "Name": "Category3:- Question One", 
      "Weight": 0.24 
     }, { 
      "Name": "Category3:- Question Two", 
      "Weight": 0.12 
     }, { 
      "Name": "Category3:- Question Three", 
      "Weight": 0.32 
     }, { 
      "Name": "Category3:- Question Three", 
      "Weight": 0.32 
     }] 
     } 
    ]; 

    $scope.toggleCategory = function(x) { 
     x.hidden = !x.hidden 
    } 
}); 

ここではjsFiddle実施例にアップsumed私の努力です： http://jsfiddle.net/xjb0soLn/31/

Answer 1

あなたは"in"を使用する必要がありますNG-クラスは、すなわち

<tr ng-repeat="qs in x.questions" ng-hide="x.hidden" ng-class={slideUp: x.hidden, slideDown: !x.hidden}> 

   <tr ng-repeat="qs in x.questions" ng-hide="x.hidden" ng-class="{slideUp: x.hidden, slideDown: !x.hidden}"> 

すべきであり、それは