CODEWITHSUNDEEP
angularjsionic-frameworkng-animate
Yehia A.Salam
Yehia A.Salam

Reputation: 2078

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 http://lab.hakim.se/scroll-effects/mobile.html 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 http://play.ionic.io/app/4ae65754fc64 (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.

Upvotes: 2

Views: 738

Answers (1)

thepio
thepio

Reputation: 6263

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: http://play.ionic.io/app/3c0e90238fe8

Codepen demo (more generic): http://codepen.io/thepio/pen/KMPeZo

Upvotes: 1

Related Questions