javascript - 使用 AngularJS ng-show 的 CSS 过渡

Question

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

我有两种类别，父类和子类。当我点击父级时，我想显示父级的子类别，如果它们已经显示则隐藏它们。

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

这是 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

我 fork 了一个 new plunker有一个工作版本。

我需要将 badge-slider 类添加到具有 ng-show 属性的实际元素中:

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