Angular 1.3 animation not working in firefox

Question

We have an ng-repeat directive which uses ng-hide to do an animated show and hide based on a selected index. The animations work correctly in all browsers except Firefox.

In Firefox the animation for .ng-hide-remove is not working. You can see it move a little bit and stop. I am using Firefox Version 33.0 But I tried with 32.0 as well.

This problem only occurs with Angular 1.3 the same code works in Firefox using angular version 1.2.

Here is the repeat code

 <div class="item" ng-repeat="item in items" ng-show="$index == selectedItem" >
  Item: {{item}}
</div>

Here are the css styles:

.item {
  position:absolute;
  top:50px;
  left:200px;
  border:solid 1px black;
  padding:10px;
  background-color:#f5f5f5;
  width:100px;
}

.item.ng-hide-add {
  -webkit-animation: fadeInLeft 1.5s;
  animation: fadeInLeft 1.5s; 
}

.item.ng-hide-remove {
  -webkit-animation: fadeOutRight 1.5s;
  animation: fadeOutRight 1.5s; 
}

Here is a plunker that contains the full demo: http://plnkr.co/edit/UFI6eWqfnDcCkpIe6d1i?p=preview

Any help would be much appreciated. Am I doing something wrong or is this a real angular bug that I am running into? Thanks!

Relation

sounds like you should file a [e-mail]/angular/angular.js/issues – Cuomo

Wasn't sure if it was a bug or I just did something wrong. – Relation

Well you tested it yourself, you just change angular version to 1.2 and everything is working, right? – Cuomo

Correct. But I thought maybe there was still something that I was doing incorrectly, but it just happened to work in the old version. I am really new to angular. – Relation

this might help you. #25965405 – Chanda

Thanks so much for taking a look Seminda. I did see that post, and I think that issue was due to a bug in 1.2. And the top answer for that guy was to upgrade to 1.3, where this issue is only happening with 1.3. I did try updating to 1.3.1 beta version and that did not fix the problem. – Relation

the main problem come from the effect fadeOutRight, If you change the effect by fadeInRight you can see it working. – Bastille

Thanks for taking a look senayar. I tried changing the animation like you suggeste. Works in other browsers, but not in Firefox, Did you try it in Firefox? plnkr.co/edit/OWZKaroZteIknnY6nXtA?p=preview – Relation

yes I tried with FFv33.0.2 : plnkr.co/edit/pBgf7qxulqdWBeweikzE?p=preview, you only changed -webkit-animation but you need to change animation: because FF use -moz-animation. I don't know why the effect fadeOutRight does not work. – Bastille

You are right it works in firefox with fadeInRight but not fadeOutRight, Firefox uses the non-prefixed tag, and I didn't change that one. It is really strange. There are other animate.css animations that don't work fadeOutDown doesn't work. Maybe none of the fadeOut animations work. Still it is weird. It works in the 1.2 in firefox. I do think it is a bug. I have submitted it to and Angular issue list. Thanks! – Relation

Answer 1

  .item.ng-hide-remove.ng-hide-remove-active

from https://docs.angularjs.org/api/ngAnimate/service/$animate

Animation Step What the element class attribute looks like

1. $animate.animate(...) is called class="my-animation"

2. $animate waits for the next digest to start the animation class="my-animation ng-animate"

3. $animate runs the JavaScript-defined animations detected on the element class="my-animation ng-animate"

4. the className class value is added to the element class="my-animation ng-animate className"

5. $animate scans the element styles to get the CSS transition/animation duration and delay class="my-animation ng-animate className"

6. $animate blocks all CSS transitions on the element to ensure the .className class styling is applied right away class="my-animation ng-animate className"

7. $animate applies the provided collection of from CSS styles to the element class="my-animation ng-animate className"

8. $animate waits for a single animation frame (this performs a reflow) class="my-animation ng-animate className"

9. $animate removes the CSS transition block placed on the element class="my-animation ng-animate className"

10. the className-active class is added (this triggers the CSS transition/animation) class="my-animation ng-animate className className-active"

11. $animate applies the collection of to CSS styles to the element which are then handled by the transition class="my-animation ng-animate className className-active"

12. $animate waits for the animation to complete (via events and timeout) class="my-animation ng-animate className className-active"

13. The animation ends and all generated CSS classes are removed from the element class="my-animation"

14. The returned promise is resolved. class="my-animation"

Metic