How do I animate AngularStrap Collapse

Question

I have a navbar collapse working with AngularStrap, but the collapsing is not animated. I thought I was doing everything correctly by injecting the ngAnimate library and adding the data-animation='am-collapse' attribute to my bs-collapse directive. How do I properly animate the collapse?

Here is my jsfiddle

without looking into your code: did you add css (`.animate.ng-enter`, `.animate.ng-leave` etc.)? — , Dec 18 '15 at 13:42
@Vienna, I haven't. I must have missed those classes. Where should I add those? — bheussler, Dec 18 '15 at 13:43
here is a working example: http://plnkr.co/edit/AAv3LfwkhPWyW4Den4DL?p=preview — , Dec 18 '15 at 13:44
It isn't that simple. And there's separate angular-motion package to support animations in angular-strap, as stated [here](http://stackoverflow.com/questions/30564475/responsive-navbar-collapsing-animation-with-angularstrap). And you should probably know this, since you left a comment there. — Estus Flask, Dec 18 '15 at 15:12
@estus The angular-motion library in included in my fiddle. What am I missing to make the animation work properly? — bheussler, Dec 18 '15 at 15:20

score 0 · Answer 1 · answered Dec 19 '15 at 13:23

The solution was to add the CSS animation code

.collapse.am-collapse {
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: backwards;
  overflow: hidden;
}
.collapse.am-collapse.in-remove {
    animation-name: collapse;
    display: block;
}
.collapse.am-collapse.in-add {
    animation-name: expand;
  }
}

Here is a working jsfiddle

How do I animate AngularStrap Collapse

1 Answers1