AngularJS 1.2 ng-show height animation

Question

I am trying to get height animation using Angular JS 1.2. I have a plunker that has an animation working to close an element:

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

With the key bit, this CSS will be 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 make it work to open an element. I obviously do something braindead - what am I missing?

Answer 1

Got a job 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 the class name, that's all.