Routenabhängige CSS-Seitenübergänge in AngularJS

Question

Routenabhängige CSS-Seitenübergänge in AngularJS

8

Ich bin neu in AngularJS und möchte routenabhängige Seitenübergänge implementieren. Zum Beispiel möchte ich, dass die Seite je nach Route nach links, nach rechts oder nach unten blendet.

Mein 'Plunker' erreicht dies, indem Sie dem $ routeChangeSuccess-Event zuhören und dann eine Übergangsstil-spezifische CSS-Klasse auf die ein- und ausgehende Ansicht anwenden (inspiriert von Ссылка ):

Zypern

Der Aufruf von $ scope. $ apply () im Ereignis-Listener führt jedoch dazu, dass AngularJS die Fehlermeldung "$ digest in progress" ausgibt. Aber wenn ich nicht $ scope. $ Apply () aufrufe, wird die CSS-Klasse der leaving-Ansicht nicht aktualisiert und die Animation funktioniert nicht richtig.

Was ist hier los?

angularjs

user2327642 18.01.2014, 23:56

quelle

2 Antworten

0

Gegenwärtig versuche ich mit diesem Snippet zu überprüfen, ob angular bereits in einem Digest-Zyklus ist:

%Vor%

Das ist nicht sehr hübsch, aber leider ist es der einzige Ansatz, den ich bisher für genau das Problem entdeckt habe, das Sie beschreiben.

Tharabas 19.01.2014 00:06

quelle

Tags und Links angularjs

Django: Verwenden von Annotate, Count und Distinct in einem Queryset MySQL Konvertiere latin1 Daten in UTF8

score 23 · Accepted Answer

Ich habe in deinen Plünderer geschaut. Das Problem besteht darin, wie Sie Klassen verwenden, um Ihre Ansichten zu animieren.

Wenn das $routeChangeSuccess -Ereignis ausgelöst wird, hat ngView bereits die Klasse entfernt, bevor Sie die Möglichkeit haben, die Richtung zu ändern. Sie überschreiben es, indem Sie die neue Klasse so schnell anwenden, dass sie nicht bemerkt wird, aber dann erhalten Sie den Fehler Digest in Progress.

Meine Lösung ( bottle ):

Ich habe eine Direktive entwickelt:

%Vor%

Deklarieren Sie für jede Route eine Option `animate` :

%Vor%

Und fügen Sie es einfach zu `ngView` like so hinzu:

%Vor%

css:

%Vor%

Routenabhängige CSS-Seitenübergänge in AngularJS

2 Antworten

Meine Lösung ( bottle ):

Ich habe eine Direktive entwickelt:

Deklarieren Sie für jede Route eine Option animate :

Und fügen Sie es einfach zu ngView like so hinzu:

css:

PHP Core Warning – yii\base\ErrorException

Deklarieren Sie für jede Route eine Option `animate` :

Und fügen Sie es einfach zu `ngView` like so hinzu: