AngularJS ng-show指令在隐藏元素之前显示元素

Question

所以我正在尝试为一些引导程序徽章创建一个幻灯片效果，我用它来使用AngularJS显示一些分层数据关系。

我有一个滑块效果，用于显示新的子类别，以及隐藏已经打开的子类别。 现在这一切都运作良好，除了它似乎首先做“显示幻灯片”，然后是“隐藏幻灯片”第二，这与你想要的相反。

即。 当您点击其他类别的徽章时，应首先滑动已显示的其他子类别，然后打开要显示的新子类别。

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" class="badge-slider">
      <span class="badge badge-c">{{category.category_name}}</span>
    </li>
  </ul>
</div>

相关的CSS看起来像这样：

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

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

我已经模拟了一个简化的plnkr示例来演示这里发生的事情： http ：//plnkr.co/edit/S255yk0N2wAXrfq7Mqd6

编辑1：感谢sbedulin的帮助，我能够很好地工作。 我还更新了代码，以便子类根据它们在树下的距离动态缩进。 你可以在这里找到我新模拟的版本： http ： //plnkr.co/edit/5I1pU0TZo6AjHJTbBuG9

Answer 1

我只能通过修改你的CSS来达到预期的效果：

 /* Styles go here */ .badge-slider { max-height: 100px; -webkit-transition: max-height linear 1.2s; -moz-transition: max-height linear 1.2s; -o-transition: max-height linear 1.2s; transition: max-height linear 1.2s; transition-delay: 0.0s; overflow:hidden; } .badge-slider.ng-hide { -webkit-transition: max-height linear 0.0s; -moz-transition: max-height linear 0.0s; -o-transition: max-height linear 0.0s; transition: max-height linear 0.0s; max-height: 0px; } 

我将.badge-slider过渡长度设置为1.2s，这样您就可以清楚地看到它正在工作。 关键是添加transition-delay: 0.0s; 到.badge-slider并将转换长度0.​​0s添加到.badge-slider.ng-hide 。 希望这可以帮助！

Answer 2

主要问题是<ul ng-repeat="category in categories">生成多个<ul>元素， ngRepeat应放在<li> 。

经过一些重构后，HTML将如下所示：

<ul>
    <li ng-repeat="category in categories"
        ng-init="isChild = category.category_type == 'child'"
        ng-show="category.category_show"
        class="badge-slider">

      <span ng-click="isChild || updateResults(category)"
            ng-bind="category.category_name"
            class="badge {{ isChild ? 'badge-c' : 'badge-p' }}">
      </span>

    </li>
</ul>

CSS

.badge-slider {
  -webkit-transition: all 0.2s linear 0.2s;
  -moz-transition:    all 0.2s linear 0.2s;
  -o-transition:      all 0.2s linear 0.2s;
  transition:         all 0.2s linear 0.2s;

  line-height: 30px;
  overflow:hidden;

  max-height: 30px;
}

.badge-slider.ng-hide {
  transition-delay: 0.0s;

  max-height: 0px;
}

工作插件就在这里