展开折叠功能的 CSS3 过渡问题答案

【问题标题】：CSS3 transition issue on expand collapse functionality展开折叠功能的 CSS3 过渡问题
【发布时间】：2017-06-26 19:54:05
【问题描述】：

我已经嵌套了带有类别和问题集的 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/

【问题讨论】：

标签： angularjs css-animations

【解决方案1】：

您应该在 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}">

它会起作用的

【讨论】：

更正了错字！！但是仍然collapse-expand 没有得到平滑的效果。我正在寻找更好的 CSS3 替代方案。
在我的小提琴中它正在工作..对不起，我这里没有地址..我稍后会尝试分享
我的意思是，它对展开折叠有不透明度的影响，但看起来并不平滑。我正在尝试使用高度属性