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工作示例： http://jsfiddle.net/xjb0soLn/31/

Answer 1

你应该使用＆＃34;在ng-class，即

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

它会起作用

扩展折叠功能上的CSS3过渡问题

1 个答案: