Javascript 使用AngularJS ng show的CSS转换

所以我尝试为一些引导徽章创建一个幻灯片效果，我使用AngularJS显示一些子类别

我有两种类别，父母和孩子。单击父对象时，我希望显示父对象的子类别，如果它们已经显示，则隐藏它们

我正在使用ng show指令来执行此操作。我的问题是，当我想使用CSS转换来滑入和滑出这些子类别时，动画不会显示，它只是显示或隐藏它们。这就像动画没有机会发生一样，因为show/hide指令覆盖了过渡

以下是html：

<div ng-controller="MainController">
  <ul ng-repeat="category in categories">
    <li ng-if="category.category_type=='parent'" ng-show="category.category_show">
      <span class="badge badge-p" ng-click="updateResults(category)">{{category.category_name}}</span>
    </li>
    <li ng-if="category.category_type == 'child'" ng-show="category.category_show">
      <span class="badge badge-c badge-slider">{{category.category_name}}</span>
    </li>
  </ul>
</div>

这是一个plnkr，所以你可以看到我正在做的一个非常简单的版本是如何工作的：

非常感谢任何帮助

我需要使用ng show属性将

badge slider

类添加到实际元素中：

<li ng-if="category.category_type == 'child'" ng-show="category.category_show" class="badge-slider">

---

看起来真的很棒！所以滑块必须添加到

元素中-这很有意义-它仍然在元素上，所以我在那里删除了它。。。。万分感谢

<li ng-if="category.category_type == 'child'" ng-show="category.category_show" class="badge-slider">

.badge-slider {
  max-height: 100px;
  -webkit-transition: max-height linear 0.5s;
  -moz-transition: max-height linear 0.5s;
  -o-transition: max-height linear 0.5s;
  transition: max-height linear 0.5s;
  overflow:hidden;
}