AngularJS 1.2 ng-show height animation

Question

I'm trying to get a height animation working using Angular JS 1.2. I've got a plunker here that has the animation working for closing the item:

http://plnkr.co/edit/YVtnXgjO3Evb6tz5DJOp?p=preview

With the key bit being this CSS here:

.accordion-body {
  height: 100px;
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
}
.accordion-body.ng-hide-add,
.animate-show.ng-hide-remove {
  display: block !important;
}

.accordion-body.ng-hide-add{
}

.accordion-body.ng-hide-remove{
}
.accordion-body.ng-hide {
  height:0;
}

But I can't figure out how to get it to work for opening the item. I'm obviously doing something braindead - what am I missing?

Answer 1

Got it working with the following CSS:

.accordion-body {
  height: 100px;
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
}
.accordion-body.ng-hide-add,
.accordion-body.ng-hide-remove {
  display: block !important;
  height: 0px;
}

.accordion-body.ng-hide-remove.ng-hide-remove-active {
  height: 100px;
}
.accordion-body.ng-hide-add{
  height: 100px;
}
.accordion-body.ng-hide-add.ng-hide-add-active {
  height: 0;
}

You messed up a class name is all.