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

工作插件就在這里