CSS3 Animation with AngularJS not sliding correctly in Firefox

Question

I made a CSS3 animation connected to an ng-repeat which then shows an inline-list with Bootstrap3, I limited the number of maximum 3 of the list showing and I have some little issues with appears mostly in Firefox (believe it or not IE11 is without issues, wow I was surprised).
I have 2 buttons (previous/next) and when I click the Next button then the animation of sliding from left to right start to do his job, but in Firefox when clicking multiple times, it seems that the animation only works on 2/3 of the list (basically the last item on the right always show up first without even sliding while the others are sliding from left to right). It's a little hard to explain other than that, but if you try the example in the plunker you will see the effect.

As I said this problem only occurs, so far, only in Firefox and seems ok in Chrome and IE11.

Again here is my plunker

My AngularJS controller code

<ul class="list-inline quotes">
  <li ng-repeat="quote in vm.marketDisplayedQuotes | limitTo:3" class="{{vm.animationClass}} quotes quote-{{$index}}">
        <span class="quote-name">{{quote.name}}</span> 
        <span class="quote-last">{{quote.last}}</span> 
        <span class="quote-change-percent {{quote.direction}}">{{quote.changePercent}}</span>
    </li>
</ul>

and then the Left to Right code for the CSS animation

/* Left to Right */
.animation-lr.ng-enter {
  -webkit-transition: 1s ease-out all;
  -o-transition: 1s ease-out all;
  transition: 1s ease-out all;

  -webkit-transform: translate(-100%,0);
  -o-transform: translate(-100%,0);
  transform: translate(-100%,0);
}

.animation-lr.ng-leave {
  -webkit-transition: 0s ease-out all;
  -o-transition: 0s ease-out all;
  transition: 0s ease-out all;

  -webkit-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
}

.animation-lr.ng-enter.ng-enter-active {
  -webkit-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
}

.animation-lr.ng-leave.ng-leave-active {
  -webkit-transform: translate(100%,0);
  -o-transform: translate(100%,0);
  transform: translate(100%,0);
}

You can see the effect in a print screen I made from the plunker, "CAC" is completely on right (and is fixed there and is not moving), not being at all part of the sliding animation effect

Answer 1

I updated the script to the newest version of libraries, and it work well.

jquery: 2.1.1 angular: 1.3.0 angular-animate: 1.3.0

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1-rc2/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.13/angular.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.13/angular-animate.js"></script>

I added those changes and this is the result. You can see it in this plunker link.

http://embed.plnkr.co/Ry7WTBPZKxeHhL1V5jKy/preview

Answer 2

You better use angular-ui library that will work very well with carasoul, i was myself having this issue

Answer 3

I forked your source code to give you a proposal of how you could do it. Your problem is probably in the versions of the libraries you are using.

Solution: 1. Change libraries versión. 2. Add jquery library for angular bestperformance 3. Add -moz- prefixed to css properties animation

-moz-transform `

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular-animate.js"></script>
<script type="text/javascript" src="script.js"></script>

I added those changes and this is the result. You can see it in this plunker link. I Hope this helps.

http://embed.plnkr.co/Ry7WTBPZKxeHhL1V5jKy/