2014-09-21 17 views
7

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.

Right Text not sliding

+0

Es funktioniert für mich gut auf FF. – PSL

+0

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

+0

Nopes. Ich sehe es funktioniert so gut wie es in Chrome funktioniert. – PSL

Antwort

0

Ich habe Ihren Quellcode gegabelt, um Ihnen einen Vorschlag zu geben, wie Sie das machen könnten. Ihr Problem liegt wahrscheinlich in den Versionen der Bibliotheken, die Sie verwenden.

Lösung: 1. Ändern Sie Bibliotheken versión. 2. Fügen Sie Jquery-Bibliothek für Winkel BestPerformance 3. Hinzufügen -moz- Präfix zu CSS-Eigenschaften Animation

-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> 

Ich habe diese Änderungen und das ist das Ergebnis. Sie können es in diesem Plunker Link sehen. Ich hoffe das hilft.

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

+0

Ihr Problem ist wahrscheinlich in den Versionen der Bibliotheken, die Sie verwenden – clenondavis

+0

Ich würde nicht so eine alte Version von Angular verwenden möchten, Sie zeigen im Grunde auf ' 1.2.0 RC3' ist viel zu alt, nicht einmal eine veröffentlichte Version ... Ich hätte lieber etwas mit der neuesten Version von '1.2.2x' und wie für jQuery, ja ich benutze jQuery (up to date) in Meine echte App, und schließlich das Hinzufügen von '-moz-transform' ändert nichts, da ich glaubte, Mozilla habe das' -moz'-Präfix vor langer Zeit aus dem CSS-Code entfernt. Alles was gesagt wird, wenn etwas in AngularJS oder Animate Code falsch ist, dann müssen Angular Core Devs sich dessen bewusst sein. Danke für deine Hilfe – ghiscoding

+0

Guten Morgen Gott segne dich. Ich weiß, dass die Versionen, die Sie verwenden, neuer als die Versionen sind, die ich verwende; Und das ist das Problem, Ihre Mozilla-Version verhält sich wahrscheinlich nicht so, wie Sie es wollen, wenn Sie die Bibliotheksversion verwenden. Beachten Sie, dass nicht alle Bibliothekenversionen in allen Browserversionen ordnungsgemäß funktionieren. Deshalb schließe ich diese Version ein. Ich habe Ihre Bibliotheksversion getestet, die Sie mit meiner Mozilla-Version verwenden, und es funktioniert nicht. – clenondavis

1

ich das Skript auf die neueste Version von Bibliotheken aktualisiert, und es gut funktionieren.

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>

Ich habe diese Änderungen und das ist das Ergebnis. Sie können es in diesem Plunker Link sehen.

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

+0

Wow ok Ich weiß, dass du wirklich die +50 willst und ich weiß, dass ich gesagt habe, dass ich lieber auf dem neuesten Stand bin, aber ich habe auch '1.2.2x' erwähnt, jetzt gibst du mir wirklich eine funktionierende Lösung (irgendwie) obwohl es jetzt noch eine Unrelease-Version '1.3 RC3' ist ... also hier ist der Deal, ich kann dir die 50 Punkte nicht geben, weil es keine offizielle Veröffentlichung ist (was ich wollte und auch weil 1.3 einige davon zerstört) mein Code, obwohl ich das in meiner Frage nicht angegeben habe), so würde ich immer noch eine Arbeitslösung mit '1.2.2x 'bevorzugen Ich werde warten, aber wenn das wirklich die einzige Alternative ist, könnte ich es akzeptieren – ghiscoding

+0

Der Grund denn meine Hilfe war nicht für eine Punktzahl, sondern um Ihnen eine Lösung zu geben, um Ihr Problem zu lösen. Weil das die Idee ist, helfen Sie jedem Entwickler. Ich bin kein Architekt Javascript, aber jeden Tag lerne ich mehr, indem ich anderen helfe. Aber danke für deine Punktzahl. Gott segne dich – clenondavis

+0

Nochmals vielen Dank für Ihre Hilfe, ich wollte Sie nicht beleidigen, ich schätze wirklich die Zeit, die Sie nahmen, um mit meinem Problem zu helfen. Ich denke auch wie du, dass das Beantworten von Fragen, und manchmal das Stellen von Fragen sich gegenseitig sehr hilft, so stimme ich stark mit dir überein ... mit dem gesagten will ich wirklich eine Lösung mit aktuellen Release-Versionen, das Angebot von höher finden Punktzahl hilft bei der Sichtbarkeit und ich hoffe wirklich, dass etwas mit dieser '1.2.x' Version funktioniert. Vielen Dank für Ihre Hilfe und Kommentare – ghiscoding

1

Sie bessere Winkel-ui-Bibliothek verwenden, die mit carasoul sehr gut funktioniert, war ich mir dieses Problem mit