Ho creato un'animazione CSS3 collegata a uno ng-repeat
che mostra uno inline-list
con Bootstrap3, ho limitato il numero massimo di 3 dell'elenco visualizzato e ho alcuni piccoli problemi con Firefox (credetemi o meno IE11 è senza problemi, wow sono rimasto sorpreso).
Ho 2 pulsanti (precedente/successivo) e quando faccio clic sul pulsante Avanti, l'animazione di scorrimento da sinistra a destra inizia a fare il suo lavoro, ma in Firefox quando si fa clic più volte, sembra che l'animazione funzioni solo su 2/3 della lista (in pratica l'ultimo elemento a destra appare sempre per primo senza nemmeno scorrere mentre gli altri stanno scorrendo da sinistra a destra). È un po 'difficile spiegare altro, ma se provi l'esempio nel plunker vedrai l'effetto.
Come ho detto questo problema si verifica solo, finora, solo in Firefox e sembra ok in Chrome e IE11.
Anche in questo caso è la mia plunker
Il mio codice di controllo AngularJSAnimazione CSS3 con AngularJS che non scorre correttamente 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>
e poi la sinistra a codice giusto per l'animazione 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);
}
Si può vedere l'effetto in una schermata di stampa I fatto dal plunker, "CAC" è completamente a destra (ed è fissato lì e non si muove), non essendo affatto parte dell'effetto di animazione scorrevole
Funziona bene per me su FF. – PSL
Non hai l'ultimo a destra che appare sempre prima di tutti gli altri e non si muove?Dovrei provarlo sul mio altro computer solo per assicurarmi che i numeri siano – ghiscoding
. Lo vedo funzionare perfettamente come fa su Chrome .. – PSL