6

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?

Ken Smith
  • 20,305
  • 15
  • 100
  • 147

1 Answers1

11

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.

Vinny
  • 449
  • 3
  • 6
  • Thanks! Any suggestions on how to do it if you don't know the height? I've got it sort of working using line-height as the property to animate, but it looks kinda weird. If I set the height to "auto", it works on closing, but not opening. See http://plnkr.co/edit/WYYFLff8Bvrf7sRuKfSK?p=preview. – Ken Smith Dec 11 '13 at 21:59
  • Try looking into a javascript value called scrollheight. Should get the total height of the div/element, instead of what is just displayed. You'd have take care of dynamic heights in angular though, not css, which is more work for you. – Vinny Dec 12 '13 at 19:50
  • 2
    @vlio20: You can that yourself via suggested edits :) – Matti Virkkunen Sep 26 '14 at 10:45