Angular 1.3 animation not working in firefox

Question

We have an ng-repeat directive that uses ng-hide to create an animated show and hide based on the selected index. Animation works correctly in all browsers except Firefox.

In Firefox, animations for .ng-hide-remove do not work. You can see how he moves and stops a little. I use 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 retry 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 the plunker that contains the full demo: http://plnkr.co/edit/UFI6eWqfnDcCkpIe6d1i?p=preview

Any help would be greatly appreciated. Am I doing something wrong or is this the real Angular error I am facing? Thanks!

Answer 1

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

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

Animation step What is an attribute of an element class

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

• $ animate is waiting for the next digest to start the animation class = "my-animation ng-animate"

• $ animate runs JavaScript-specific animations found in the class = "my-animation ng-animate" element

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

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

• $ animate blocks all CSS transitions in the element to ensure that the .className class style is applied immediately class = "my-animation ng-animate className"

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

• $ animate waits for one frame of animation (this pays) class = "my-animation ng-animate className"

• $ animate removes the CSS transition block placed in the element class = "my-animation ng-animate className"

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

11. $ animate applies a set of CSS styles to an element, which is then processed using 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 end of the animation and all CSS classes created are removed from the element class = "my-animation"

14. Returned promise is allowed. class = "my-animation"