2014-09-21 23 views
7

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

Right Text not sliding

+0

Funziona bene per me su FF. – PSL

+0

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

+0

. Lo vedo funzionare perfettamente come fa su Chrome .. – PSL

risposta

0

Ho biforcato il codice sorgente per darti una proposta su come potresti farlo. Il tuo problema è probabilmente nelle versioni delle librerie che stai utilizzando.

Soluzione: 1. Modificare le librerie versión. libreria jQuery 2. Aggiungi per angolare bestperformance 3. Aggiungere -moz- prefisso per le proprietà CSS animazione

-moz-transform `

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular-animate.js"></script> 
<script type="text/javascript" src="script.js"></script> 

ho aggiunto questi cambiamenti e questo è il risultato. Puoi vederlo in questo link plunker. Spero che aiuti.

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

+0

il tuo problema è probabilmente nelle versioni delle librerie che stai usando – clenondavis

+0

Non vorrei usare una vecchia versione di Angular, stai praticamente puntando a ' 1.2.0 RC3' che è troppo vecchio, nemmeno una versione rilasciata ... Preferirei avere qualcosa che funzioni con l'ultima versione di '1.2.2x' e per quanto riguarda jQuery, sì, io uso jQuery (aggiornato) in la mia vera app, e infine l'aggiunta di '-moz-transform' non apporta alcuna modifica in quanto ritengo che Mozilla abbia rimosso il prefisso' -moz' dai loro CSS molto tempo fa. Detto questo, se qualcosa non va nel codice AngularJS o Animate, allora gli sviluppatori di core Angular devono essere consapevoli. Grazie per il tuo aiuto – ghiscoding

+0

Buongiorno, Dio ti benedica. So che le versioni che stai usando sono più recenti delle versioni che sto usando; e questo è il problema, probabilmente la tua versione di Mozilla non si comporta come vuoi con la versione di libreria che stai utilizzando. Ricorda che non tutte le versioni di librerie funzionano correttamente in tutte le versioni del browser. Ecco perché includo quelle versioni. Ho provato la versione delle tue librerie che stai usando con la mia versione di Mozilla e non funziona. – clenondavis

1

ho aggiornato lo script per la versione più recente delle librerie, e funzionano bene.

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>

ho aggiunto questi cambiamenti, e questo è il risultato. Puoi vederlo in questo link plunker.

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

+0

Wow ok so che vuoi davvero il +50 e so che ho detto che preferisco essere aggiornato ma ho anche citato '1.2.2x', ora d'altra parte mi stai davvero dando una soluzione funzionante (tipo) sebbene sia ancora una versione 1.3 RC3 non rilasciata al momento ... quindi ecco l'accordo, non posso darti i 50 punti perché non è una versione ufficiale (che è quello che volevo e anche perché 1.3 rompe alcuni dei il mio codice, anche se non l'ho specificato nella mia domanda), quindi preferirei comunque una soluzione funzionante con '1.2.2x', aspetterò, ma se davvero è l'unica alternativa, potrei accettarlo – ghiscoding

+0

Il motivo perché il mio aiuto non era per un punteggio, ma per aiutarti a darti una soluzione per risolvere il tuo problema. Perché questa è l'idea, aiutare ogni sviluppatore. Non sono un architetto javascript, ma ogni giorno imparo di più aiutando gli altri. Ma grazie per il tuo punteggio. Dio ti benedica – clenondavis

+0

Ancora grazie per il tuo aiuto, non volevo offenderti, apprezzo davvero il tempo che hai impiegato per aiutare il mio problema. Penso anche che tu che rispondi alle domande e che a volte mi fai domande molto spesso, quindi sono assolutamente d'accordo con te ... con quello detto, desidero davvero trovare una soluzione con le attuali versioni di rilascio, l'offerta di maggiore il punteggio aiuta a dare visibilità e spero davvero di avere qualcosa a che fare con questa versione '1.2.x'. Grazie mille per il tuo aiuto e i tuoi commenti – ghiscoding

1

È meglio usare biblioteca angolare-ui che funziona molto bene con carasoul, ero io avendo questo problema

Problemi correlati