Currently, I am in the process of implementing a slide effect for bootstrap badges to showcase hierarchical data relationships using AngularJS.
My goal is to have a slider-effect that smoothly reveals new sub-categories while concealing previously open sub-categories. However, the current implementation first shows the "slide-in" effect followed by the "slide-out" effect, when ideally it should be the other way around.
For instance, upon selecting a badge for a different category, the existing open sub-categories should close before opening the new sub-categories.
The HTML structure is outlined below:
<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 corresponding CSS is as follows:
.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 created a simplified plnkr example to illustrate the issue: http://plnkr.co/edit/S255yk0N2wAXrfq7Mqd6
UPDATE: With assistance from sbedulin, I managed to resolve the problem and enhance the code to dynamically indent subcategories based on their position within the hierarchy. Check out the updated mockup here: http://plnkr.co/edit/5I1pU0TZo6AjHJTbBuG9