6

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!

Chris Mullins
  • 6,677
  • 2
  • 31
  • 40
  • sounds like you should file a bug@https://github.com/angular/angular.js/issues – Linial Oct 21 '14 at 19:57
  • Wasn't sure if it was a bug or I just did something wrong. – Chris Mullins Oct 21 '14 at 20:10
  • Well you tested it yourself, you just change angular version to 1.2 and everything is working, right? – Linial Oct 21 '14 at 20:14
  • 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. – Chris Mullins Oct 21 '14 at 21:35
  • 1
    this might help you. http://stackoverflow.com/questions/25964905/css3-animation-with-angularjs-not-sliding-correctly-in-firefox – Seminda Oct 23 '14 at 04:29
  • 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. – Chris Mullins Oct 23 '14 at 12:51
  • 1
    the main problem come from the effect fadeOutRight, If you change the effect by fadeInRight you can see it working. – rbinsztock Oct 27 '14 at 14:27
  • 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? http://plnkr.co/edit/OWZKaroZteIknnY6nXtA?p=preview – Chris Mullins Oct 27 '14 at 21:30
  • 1
    yes I tried with FFv33.0.2 : http://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. – rbinsztock Oct 28 '14 at 23:36
  • 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! – Chris Mullins Oct 29 '14 at 17:28

1 Answers1

0
  .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"

  1. $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"

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

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

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

fearis
  • 424
  • 3
  • 15