NicolasMoise NicolasMoise - 5 months ago 19
AngularJS Question

ng-animate with ng-class directive

You can use ng-animate with ng-class with the add and remove animations. I'm looking to make one animation in CSS3 but haven't found good examples with ng-class online. So I was wondering if people have good examples they want to share.

I am not sure what my final animation will look like, but for the purpose of this example let's say I just want to make the height of the div gradually increase when I add the class

myclass
.

<div ng-class="{{myclass:scopeVar}}" ng-animate="?????"></div>

**CSS**

.myclass.ng-add{??}
.myclass.ng-add-active{??}
.myclass.ng-remove{??}
.myclass.ng-remove-active{??}

Answer

I've found a solution to this problem so I thought I'd share it.

http://jsfiddle.net/nicolasmoise/XaL9r/1/

What's nice about this one is that it only requires two CSS classes. You can directly insert the CSS3 transition property into your base class. Unlike other ng-animate cases, I believe all the animations are done in CSS3 (no messing with the DOM like with animations with ng-include etc...).

I want to thank Ilan Frumer for the link to his answer. His solution was for animation with ng-show which is very similar but a little different from animations with ng-class. Hence why I decided to post my example.

Comments