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!

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"