Angular Animations (ngAnimate) not working for Ionic v1.2.4 (angular v1.4.3)


#1

Hello there!

I recently had to upgrade my Ionic app’s version [as I migrated to a different machine], everything worked well and as expected in the app with the exception of animations. All the angular (angular animate) based animations I had no longer work! They were basically CSS transitions applied to the .ng-enter and ng-leave classes.

I was wondering if this problem has something to do with Ionic now using angular v1.4.3? I read here and here that it’s a bug associated with the 1.4.x versions of angular?

Has this issue been reported before? if so… is there a workaround? I would like to hear from someone on the ionic team on this matter [if possible] @mhartington. These animations are crucial for my app.

Thanks in advance!


#2

Having the same problem after updating to ionic 1.2.1


#3

Did anyone find a way to get this working?


#4

Having the same problem. Any news on that?


#5

@Tahmmee, @yosikal I was able to solve this problem by recompiling the CSS. When you upgrade Ionic it will upgrade the node_modules/ as well (that was my case), there’s this package called gulp-sass which is really important because it generates the minified CSS (from your SASS) that the Ionic app uses. In my case, the problem was that the version of gulp-sass that I got (a more recent one) was not able to compile the CSS (it was throwing some errors), and you know, No CSS = No angular animations.

Anyways, the solution is to install gulp-sass in exactly the way described here, check out the answer by user @bonatoque. It is of extreme importance that you have Node version: 0.12.x, a different version will cause some Horrible errors while trying to install node-sass and/or gulp-sass.

This is what I discovered, and it solved my problems with animations, steps 1-5 in that post should get you covered, then just run gulp sass

Hope it helps!


#6

In my case I actually found it to be a bug with ion-slide-box. Line 63351 in ionic.bundle.js:

$animate.enabled(false, $element);

Making the animation stop working as the parameters are passed the wrong way. It should be :

$animate.enabled($element, false);

Do you know where should I report this bug?
Still, I have a new issue now that the animation doesn’t work first time. Only after second ng-hide change animation starts to work.


Animation on ion-item stopped working on devices
#7

I have same problem here. I can’t see any ng-enter, ng-leave classes.


#8

Thank you yosikal. Indeed you are right. :wink:
I just reported it here: https://github.com/driftyco/ionic/issues/5664


#9

Confirmed that line 63351 if you change to the correct syntax it should fix this problem!


ngAnimate not working properly with ng-if/ng-show on Ionic 1.2.4
#10

v.1.3.0 has fixed this issue and the migration was really good


#11

I have the same issue in ionic 1.3.3 - ngAnimate not adding ng-enter classes in Ionic V1 app