Yehia A.Salam Yehia A.Salam - 4 months ago 39x
AngularJS Question

ngAnimate Flip Animation

I spent the last 5 hours trying to get this animation to work with no luck. I wanted to create a cool animation whenver the user click on a button, the idea is to display a list of ul elements in a flip animation, pretty much like what is doing (if you selected flip from the gear icon and changed chrome device mode to a mobile device).

Im using ngAnimate along with Angular and Ionic, I created the snippet here (try to click the Add to Cart button). I want to display each li item as if they are flip and cascading whenever they are displayed. For some reason all the animation classed are ignored.


Ok, I think I achieved what you were wanting to achieve. I provided you two demos below.

But first of all the ng-animate directive is not supported anymore in AngularJS >= 1.2. And for ng-show based animations you have to use the ng-hide-add, ng-hide-remove CSS classes not the CSS classes described in the ngRepeat documentation.

The ionic demo (first link below) is basicly just a mockup of your code and is not perfect by any means.

The codepen demo is a bit more modified example and generic example. I used <ion-list> and <ion-item> instead of <ul> and <li>.

Hopefully this gets you in the right direction when implementing your final solution.

Ionic demo:

Codepen demo (more generic):