Ich habe eine CSS3 Animation an eine ng-repeat
angeschlossen, die dann eine inline-list
mit Bootstrap3 zeigt, beschränkte ich die Anzahl der maximal 3 der Liste und ich habe einige kleine Probleme mit erscheint meist in Firefox (glaube es oder nicht IE11 ist ohne Probleme, wow ich war überrascht).
Ich habe 2 Tasten (vorherige/nächste) und wenn ich auf die Schaltfläche Weiter klicken, dann die Animation des Verschiebens von links nach rechts beginnen, um seine Arbeit zu tun, aber in Firefox, wenn Sie mehrmals klicken, scheint es, dass die Animation nur auf 2 funktioniert/3 der Liste (grundsätzlich erscheint der letzte Punkt rechts immer zuerst, ohne zu gleiten, während die anderen von links nach rechts gleiten). Es ist ein bisschen schwer zu erklären, aber wenn Sie das Beispiel in plunker versuchen, werden Sie den Effekt sehen.
Wie gesagt, dieses Problem tritt bisher nur in Firefox auf und scheint in Chrome und IE11 in Ordnung zu sein.
Auch hier ist mein plunker
Mein AngularJS Controller-CodeCSS3 Animation mit AngularJS rutscht nicht richtig in 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>
und dann von links nach rechts Code für die 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);
}
Sie den Effekt in einem Druckbild kann ich sehen "CAC" ist vollständig auf der rechten Seite (und ist dort fixiert und bewegt sich nicht), was überhaupt nicht Teil des Gleitanimationseffekts ist.
Es funktioniert für mich gut auf FF. – PSL
Hast du nicht den letzten rechts, der immer vor allen anderen erscheint und sich nicht bewegt?Ich sollte es auf meinem anderen Computer versuchen, nur um sicherzustellen, – ghiscoding
Nopes. Ich sehe es funktioniert so gut wie es in Chrome funktioniert. – PSL