Ich benutze Angular mit UI Bootstrap . Ich habe die benutzerdefinierte Direktive erstellt, die Broadcast-Alerst in das Array von Alerts verschiebt, die an die Ansicht gebunden sind (dargestellt als Bootstrap-Alerts). Nach dem bestimmten Timeout werden die Alerts aus dem Array (und damit aus der View) entfernt. Hier ist der Code:
%Vor%Ich frage mich, ob es möglich ist, ein Ausblenden (oder irgendeine andere Animation) zu den Warnungen hinzuzufügen, bevor sie entfernt werden? Jede Hilfe und Tipps wären willkommen!
Sie können die integrierte Animationsfunktion von angular verwenden. Sie fügen einfach ein data-ng-animate="'<animation class>'" auf das wiederholte Element hinzu.
Sehen Sie diesen ausgezeichneten Beitrag animation-in-angularjs oder die Antwort von @Nikos.
ist soweit ich weiß keine Animationsunterstützung. Sie können die Animation jedoch selbst erstellen. Ich bin kein eckiger Profi, also ist das vielleicht nicht der beste Ansatz.
Erstellen Sie eine zweite $timeout , die eine 'Fade-out CSS3'-Animation hinzufügt, die vor dem ersten Timeout ausgelöst wird:
Erstellen Sie CSS3-Animationsklassen zum Ausblenden einer Warnung (möglicherweise bereits vom Bootstrap)
%Vor%Fügen Sie ein zweites $ timeout hinzu:
%Vor% Fügen Sie in Ihrer Vorlage eine bedingte Klasse mit ng-class hinzu:
Wir haben ein ähnliches Setup; die Vorlage:
%Vor%Der Controller ist einfach und enthält die folgende Funktion und das Nachrichten-Array:
%Vor%Die Animationsdefinition (siehe ng-animate - wir verwenden jQuery UI):
%Vor% Natürlich ersetzen Sie slideUp/Down() durch den gewünschten Effekt.
Tags und Links javascript angularjs angularjs-directive angular-ui angular-ui-bootstrap