【发布时间】：2014-11-15 21:03:43
【问题描述】：
我制作了一个连接到ng-repeat 的 CSS3 动画，然后用 Bootstrap3 显示了一个 inline-list，我限制了列表中最多显示 3 个的数量，并且我有一些小问题，主要出现在 Firefox 中（相信它或不是 IE11 没有问题，哇，我很惊讶）。
我有 2 个按钮（上一个/下一个），当我单击“下一个”按钮时，从左到右滑动的动画开始执行他的工作，但在 Firefox 中单击多次时，动画似乎只适用于列表的 2/3（基本上右边的最后一项总是首先出现，甚至没有滑动，而其他项从左到右滑动）。除此之外有点难以解释，但是如果您尝试plunker 中的示例，您会看到效果。
正如我所说，到目前为止，这个问题只发生在 Firefox 中，并且在 Chrome 和 IE11 中似乎还可以。
这里又是我的plunker
我的 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”完全在右侧（并且固定在那里并且没有移动），根本不是滑动动画效果的一部分
【问题讨论】：
-
它在 FF 上很适合我。
-
你不是有右边最后一个总是出现在所有其他人之前并且不动的吗？我应该在我的另一台电脑上试一试，以确保
-
我可以看到问题，但奇怪的是，一旦我使用 Firebug 检查列表元素，它就会消失。关闭 Firebug 后，问题再次弹出。
-
即使打开 Firebug，我也发现行为不一致。对于前 2 或 3 次点击“下一步”，它不会发生，然后随机发生一次。
-
我开始相信这与 ng-repeat 的运行方式有关。我将样式更改为不使用变换，以防万一这是一个错误，并且正在发生同样的影响。 plnkr.co/edit/qVvzvxRcf06vnclXMICu?p=preview
标签： angularjs css firefox angularjs-ng-repeat css-animations