Wie benutze ich ng-animate in ng-repeat um Objekte zu verkleinern?

Sie müssen die erste Zeile der CSS umschalten, um die "Start" -Klassen anstelle der Setup-Klassen zu beeinflussen. Ich weiß, so machen sie das nicht, aber es wird funktionieren. Also mach es:

Dies hilft, weil Sie versuchen, eine Eigenschaft zu animieren, die das Element normalerweise nicht besitzt. In Elementen wird die Eigenschaft "max-height" normalerweise nicht festgelegt. Wenn Sie also gleichzeitig mit dem Übergang eine maximale Höhe anwenden, wird dadurch die Tatsache animiert, dass Sie die Eigenschaft hinzugefügt haben! Dies ist bevor die "Start" -Klasse überhaupt angewendet wird, was bedeutet, dass die Setup-Phase nicht beendet wird (da die Animation 1 Sekunde dauert), bevor die Startphase beginnen soll. Wenn Sie also die "Verlassen" -Animation anwenden, werden die folgenden Schritte ausgeführt.

1. Ihr Element beginnt ohne eine maximale Höhe.
2. Die "leave-setup" -Klasse wird angewendet und gibt Ihnen maximale Höhe und einen Übergang.
3. Da die maximale Höhe nur "geändert" wurde (von nicht zu existierend) und Sie einen Übergang haben, beginnt der Browser nun damit, die maximale Höhe von einem Standardstartwert (0 scheint es) auf Ihren gewählten Wert von zu animieren 250px, also schrumpft das Element sofort auf 0 und beginnt mit der Animation!
4. Jetzt wird die "leave-start" -Klasse angewendet, aber Schritt 3 ist noch nicht fertig! Die maximale Höhe ist immer noch 0 oder nahe, da sie immer noch beschäftigt ist, das Einfügen der Eigenschaft zu animieren, so dass die Animation einfach stoppt und wieder auf 0 geht und wir nie etwas sehen.

Aber wenn wir die Übergangseigenschaft von "setup" -step auf "start" -step verschieben, wie in der obigen css, wird Schritt 3 sofort sein, da es keinen Übergang hat. Der Übergang erscheint zuerst in Schritt 4. So haben wir:

1. Ihr Element beginnt ohne eine maximale Höhe.
2. Die "leave-setup" -Klasse wird angewendet und gibt Ihnen die maximale Höhe , aber nicht Übergang.
3. Wir haben keinen Übergang, daher wird die maximale Höhe sofort auf 250px geändert.
4. Nun wird die "leave-start" -Klasse angewendet, und da Schritt 3 nun abgeschlossen ist, ist die maximale Höhe jetzt 250px und wir können davon ohne Probleme weglaufen.

Sie haben dieses Problem mit der Deckkraft nicht, da Sie mit dem Standardwert 1 animieren. Es gibt keine Animation, die Sie in Schritt 3 stören könnten. Es scheint auch so, dass die Eingabeereignisse ein wenig anders gehandhabt werden, als sie sind Es ist wahrscheinlicher, dass Sie von einem nicht standardmäßigen Wert animieren, sodass Sie dieses Verhalten nicht bei allen Ereignissen sehen.

Bearbeiten:

Ich experimentierte ein bisschen mehr damit und es stellt sich heraus, dass meine Antwort nicht für Firefox funktioniert (zumindest nicht für FF Windows). Zuallererst scheint FF gerade fehlzuschlagen, wenn Sie eine nicht existierende Eigenschaft animieren, also müssen Sie sicherstellen, dass Ihre Elemente von Anfang an eine maximale Höhe haben, etwa wie folgt:

Das behebt mich, aber aus irgendeinem Grund funktioniert überhaupt keine Animation in Firefox unter Windows. Ich versuche immer noch, das herauszufinden.

Ich bin mir nicht sicher, warum ich max-height angeben soll. Sie können alle Höhenangaben weglassen und es scheint zu funktionieren.

Die angenommene Antwort ist jetzt ein bisschen veraltet, aber es war immer noch sehr hilfreich, da ich das gleiche Problem bearbeitet habe. Hier sehen Sie ein Beispiel für eine Expand / Collapse-Funktion mit den neuesten Versionen von ng-animate und dem limitTo -Filter für ng-repeat :

HTML:

CSS: