CSS3 transition issue on expand collapse functionality

Question

I've nested json with categories and questions set. Each category has its own set of questions expanding/collapsing on click category row. Toggling functionality works fine, but somehow I am not able to add smooth CSS transition effect while expanding and collapsing. My code: 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
    }   
});

Here is my efforts sumed up into jsFiddle working example: http://jsfiddle.net/xjb0soLn/31/

Answer 1

You should use " in ng-class, i.e.

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

should be

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

and it will work