Проблема перехода 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 
    } 
}); 

Вот мои усилия SUMED вверх в jsFiddle рабочий пример: http://jsfiddle.net/xjb0soLn/31/

Answer 1

вы следует использовать «в нг-класса, т.е.

<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}"> 

и он будет работать