ng-animate funktioniert nicht in 1.3 - angularjs, ng-animate

Ich bekomme die Klasse ng-animate auf die Richtlinie angewandt, aber ich bekomme nicht:

ng-hide-remove.ng-hide-remove-active oder .ng-hide-remove.ng-hide-remove-active

Ich habe eckige und angular animierte 1.3 geladen. und bin inklusive ngAnimate in App.js

<div class="message animate-show {{message.type}}" ng-show="message">
{{message.text}}
</div>

Die Übergänge sind nicht passiert:

.message.animate-show {
line-height:20px;
opacity:1;
padding:10px;

&.ng-hide-add.ng-hide-add-active,
&.ng-hide-remove.ng-hide-remove-active {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}

&.ng-hide {
line-height:0;
opacity:0;
padding:0 10px;
}
}

Antworten:

8 für die Antwort № 1

Für eine einfache Animation wie Ein- / Ausblenden benötigen Sie die folgenden CSS-Klassen:

.my-animation {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
opacity: 1;
}

.my-animation.ng-hide {
opacity: 0;
}

---

AKTUALISIEREN:

Wenn Sie einen anderen Übergang für das Element haben, das nicht betroffen sein soll, verwenden Sie die folgenden CSS-Definitionen, um die Übergänge nur beim Ein- / Ausblenden anzuwenden:

.my-animation {
opacity: 1;
}

.my-animation.ng-hide {
opacity: 0;
}

.my-animation.ng-hide-add,
.my-animation.ng-hide-remove {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
}

---

Siehe auch dies kurze Demo.

---

0 für die Antwort № 2

Die obige Antwort von ExpertSystem ist korrekt. Wenn Sie jedoch keine Animation in Angular erhalten, müssen Sie sicherstellen, dass das ngAnimate-Modul zu Ihrer App hinzugefügt wird:

Das ngAnimate-Modul bietet Unterstützung für CSS-basierte Animationen (Keyframes und Übergänge) sowie JavaScript-basierte Animationen über Callback-Hooks.

Siehe Quelle: https://docs.angularjs.org/api/ngAnimate

Dies kann in Ihrem Code geschehen, der Ihre AngularJS-App wie folgt definiert:

var app = angular.module("myApp", ["ngAnimate"]);

---