使用AngularJS ng-show的CSS過渡

Question

因此，我試圖為一些引導徽章創建幻燈片效果，這些引導徽章用於使用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>

這是相關的CSS過渡和.ng-hide內容：

.ng-hide-add, .ng-hide-remove {
    display: block !important;
}

.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;
}

.badge-slider.ng-hide {
  max-height: 0px;
}

這是一個plnkr，因此您可以看到我正在做的非常簡化的版本如何工作： http : //plnkr.co/edit/PEAxMV1SA0Wk6fpNhJH4

任何幫助，不勝感激！

Answer 1

我用工作版本分叉了一個新的pl子 。

我需要使用ng-show屬性將badge-slider類添加到實際元素中：

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

我在.badge-slider規則中添加了overflow:hidden ：

.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;
}