ng-belebte arbeitet nicht in 1.3

Question

ich die Klasse bin immer ng-animate die Richtlinie angewandt, aber ich bin nicht immer:

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

Ich habe Winkel- und Winkel animieren 1.3 geladen. und bin auch 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; 
    } 
} 

Answer 1

Für eine einfache Animation wie Fading in/out, müssen 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; 
} 

---

UPDATE:

Wenn Sie andere transistion auf das Element, das Sie wollen nicht betroffen zu erhalten, verwenden Sie die folgenden CSS-Definitionen, um nur die transistions auf dem Verblassen gelten in/out:

.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; 
} 

---

See auch diese short demo.

Answer 2

Die obige Antwort von ExpertSystem ist korrekt. Wenn Sie jedoch noch nicht Animation bekommen können in Angular arbeiten, dann müssen Sie sicherstellen, dass das ngAnimate Modul zu Ihrer Anwendung hinzugefügt wird:

Die ngAnimate Modul Unterstützung für CSS-basierten Animationen bietet (Keyframes und Transitionen) sowie als JavaScript-basierte Animationen über Callback-Hooks.

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

Dies kann in Ihrem Code ausgeführt werden, die Ihre AngularJS App wie folgt definiert:

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