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

Question

我制作了一个连接到 ng-repeat 的 CSS3 动画，然后用 Bootstrap3 显示一个 inline-list，我限制了列表中最多显示 3 个的数量，我有一些小问题主要出现在 Firefox 中(信不信由你，IE11 没有问题，哇，我很惊讶)。
我有 2 个按钮(上一个/下一个)，当我单击“下一步”按钮时，从左向右滑动的动画开始完成他的工作，但是在 Firefox 中，当多次单击时，动画似乎只起作用在列表的 2/3 上(基本上右边的最后一个元素总是最先出现，甚至没有滑动，而其他元素则从左向右滑动)。除此之外有点难以解释，但如果您尝试 plunker 中的示例你会看到效果。

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

又是我的plunker

我的 AngularJS Controller 代码

<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

我将脚本更新到最新版本的库，它运行良好。

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>

我添加了这些更改，这就是结果。您可以在这个 plunker 链接中看到它。

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