扩展崩溃功能的CSS3转换问题

我已经嵌套json的类别和问题设置。每个类别都有自己的一套问题，在点击类别行上展开/折叠。切换功能正常工作，但不知何故，我无法在展开和折叠时添加平滑的CSS过渡效果。我的代码： HTML：扩展崩溃功能的CSS3转换问题

<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/

来源

2017-02-09 SatAj

你应该使用“中纳克级，即

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

，也将努力

来源

2017-02-09 04:38:17 Massimo

更正错字！但仍然崩溃扩大并没有得到顺利的效果。我正在寻找更好的CSS3替代品。 – SatAj

在我的小提琴中，它正在工作。我不打算在这里的地址..我会尽力在 – Massimo

后分享，我的意思是，它在展开 - 倒塌时具有不透明效果，但看起来并不平滑。我想玩高度属性 – SatAj

扩展崩溃功能的CSS3转换问题

回答

相关问题