7
我做了一個CSS3動畫連接到一個ng-repeat，然後顯示一個inline-list與Bootstrap3，我限制列表顯示的最大數量3，我有一些小問題，主要出現在Firefox（相信IE11沒有問題，哇，我很驚訝）。
我有2個按鈕（上一個/下一個），當我點擊下一個按鈕時，從左向右滑動的動畫開始執行他的工作，但在Firefox中點擊多次時，似乎動畫只能在2/3（基本上右邊的最後一項總是先顯示出來，沒有滑動，而其他的則從左向右滑動）。除此之外，有點難以解釋，但如果您嘗試plunker中的示例，您會看到效果。
正如我所說的這個問題只發生在目前爲止，只有在Firefox和Chrome和IE11似乎確定。
同樣，這裏是我plunker
我AngularJS控制器代碼CSS3動畫與AngularJS不能正確滑動在Firefox
<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);
}
你可以看到在打印屏幕我的影響「CAC」完全在右側（並且在那裏固定並且不移動），並非完全是滑動動畫效果的一部分
它很適合我的FF自己。 – PSL 2014-09-21 23:32:42
難道你沒有最後一個總是出現在所有其他人之前，並沒有移動？我應該在我的另一臺計算機上嘗試，以確保 – ghiscoding 2014-09-21 23:40:40
不存在。我發現它在Chrome上運行的很好。 – PSL 2014-09-21 23:41:38