Ich kämpfe mit einem Problem: Ich habe ein Menü mit x-Menge von Gegenständen. In diesem Beispiel habe ich drei Elemente.
Jedes Element hat einen Inhaltsbereich. Wenn Sie auf den Menüeintrag klicken, sollte der Inhalt eingeblendet werden.
Was ich bisher erreicht habe, ist, dass wenn man von "Punkt 1" startet und zu "Punkt 2" wechselt, die Animation (von rechts nach links gleitend, wie eine PowerPoint-Folie)
Aber ich hätte auch gerne den umgekehrten Effekt, also würde er von rechts nach links gleiten, wenn ich von "Punkt 2" zu "Punkt 1" gehe. Ich kann es einfach nicht herausfinden, wie man das für beide Wege macht.
Also, was ich verlange, ist eine Art Karussell mit ngAnimate, also muss ich für diese Art von Animationen nicht zu jQuery zurückkehren. Ich möchte jQuery aus meinem Projekt herausschneiden, während ich AngularJS benutze.
Um einen Karusselleffekt zu erzielen, müssen Sie die Folienklasse basierend auf dem Index, zu dem Sie wechseln, wechseln. Verwenden Sie daher ngClass und ändern Sie die Klasse von slide-left in slide-right , wenn Sie zu einem niedrigeren Wert wechseln Index und umgekehrt.
Für das verschwindende Element verbirgt jedoch ngIf das Element bevor die Klasse aktualisiert wird. Daher müssen Sie die Übergänge verzögern, um sicherzustellen, dass ngClass zuerst ausgeführt wird. Eine Möglichkeit dazu besteht in der Verwendung der Funktion $timeout , die in Ihre Anweisung eingefügt werden muss.
Ihr Code wird:
%Vor%Überprüfen Sie dieses Beispiel .
Wenn Sie bereits UI Bootstrap installiert haben, möchten Sie vielleicht ihre Karussell-Komponente ausprobieren.
Tags und Links angularjs ng-animate