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.
@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 waydescribed 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
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.
