AngularJS的CSS3动画在Firefox中无法正确滑动

Question

我做了一个CSS3动画连接到一个ng-repeat随后显示inline-list与Bootstrap3,我限制显示的列表中的最大3的数量和我有一些小问题主要出现在Firefox(相信它或不IE11没有问题,哇我是惊讶).
我有2个按钮(上一个/下一个),当我点击下一个按钮时,从左到右滑动的动画开始完成他的工作,但在Firefox中多次点击时,似乎动画只适用于2/3列表(基本上右边的最后一项始终首先显示,而不是滑动而其他项从左向右滑动).除此之外,有点难以解释,但如果你在plunker中尝试这个例子,你会看到效果.

正如我所说,这个问题只发生,到目前为止,仅在Firefox中,在Chrome和IE11中似乎没问题.

这里是我的pluularer

My AngularJS控制器代码

<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>

然后是CSS动画的从左到右的代码

/* 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);
}

你可以在我用plunker制作的打印屏幕上看到效果,"CAC"完全在右边(并且固定在那里并且没有移动),而不是滑动动画效果的所有部分

Answer 1

我分叉了您的源代码，以便为您提供如何执行此操作的建议。\n您的问题可能出在您正在使用的库的版本中。

\n\n

解决方案：\n 1. 更改库 versi\xc3\xb3n。\n 2. 添加 jquery 库以获得角度最佳性能\n 3. 在 css 属性动画中添加 -moz- 前缀

\n\n

-moz-transform\n`

\n\n\n\n

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

\n\n

我添加了这些更改，这就是结果。你可以在这个 plunker 链接中看到它。我希望这有帮助。

\n\n

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

\n