CSS Transitions using AngularJS ng-show

Question

So I'm trying to create a slide effect for some bootstrap badges I am using to display some sub-categories using AngularJS

I have two types of categories, parent and child. When I click on a parent, I want to show the child categories for the parent, and hide them if they are already showing.

I am using the ng-show directive to do this. The problem I have is that when I want to use a CSS transition to slide these sub-categories in and out, the animation is not shown, it just shows or hides them. It is like the animation is not geting a chance to happen, as the show/hide directive is over-riding the transition.

Here is the 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>

Here is the relevant CSS transition and .ng-hide stuff:

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

Here is a plnkr for it, so you can see how a very very simplified version of what I am doing works: http://plnkr.co/edit/PEAxMV1SA0Wk6fpNhJH4

Any help much appreciated!

Isaac · Accepted Answer · 2015-08-06 10:25:37Z

1

I've forked a new plunker with a working version.

I needed to add the badge-slider class to the actual element with the ng-show attribute:

<li ng-if="category.category_type == 'child'" ng-show="category.category_show" class="badge-slider">

And I added overflow:hidden to the .badge-slider rule:

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

answered Aug 6, 2015 at 10:25

Isaac

2,2331 gold badge15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom O'Brien Over a year ago

That looks really great! So the slider must be added to the <li> element - that makes sense - It's still on the <span> element, so I removed it there.... Thanks a million

Collectives™ on Stack Overflow

CSS Transitions using AngularJS ng-show

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related