AngularJS ng-show directive showing elements before hiding elements

Question

So I'm trying to create a slide effect for some bootstrap badges I am using to display some hierarchical data relationships using AngularJS.

I have a slider-effect for showing new sub-categories, and hiding sub-categories that are already open. Now this is all working well, except it seems to do the "showing slide" first, and then the "hiding slide" second, which is the opposite of what you would like.

ie. When you hit a badge for a different category, it should first slide closed the already showing other sub-categories, and then open the new sub-categories to be shown.

The html looks like this:

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

The relevant CSS looks like this:

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

I have mocked up a simplified plnkr example to demonstrate what is happening here: http://plnkr.co/edit/S255yk0N2wAXrfq7Mqd6

EDIT 1: Thanks to the help of sbedulin I was able to get this working beautifully. I've also updated the code so that the subcategories dynamically indent based on how far down the tree they are. You can find my newly mocked up version here: http://plnkr.co/edit/5I1pU0TZo6AjHJTbBuG9

Answer 1

I was able to achieve the desired effect by only modifying your 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; } 

I set your transition lengths to 1.2s in .badge-slider just so you can clearly see that it is working. The key is adding in transition-delay: 0.0s; to .badge-slider and adding transition lengths of 0.0s to .badge-slider.ng-hide . Hope this helps!

Answer 2

Main problem is that <ul ng-repeat="category in categories"> generates multiple <ul> elements, ngRepeat should be placed on <li> s.

After some refactoring HTML will look like:

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

Working plunk is here