ng-animate no funciona en 1.3 - angularjs, ng-animate

Estoy recibiendo la clase ng-animate Aplicado a la directiva pero no estoy recibiendo:

ng-hide-remove.ng-hide-remove-active o .ng-hide-remove.ng-hide-remove-active

Tengo angulosas y angulosas animadas 1.3 cargadas. y estoy incluyendo ngAnimate en app.js

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

Las transiciones no están ocurriendo.

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

Respuestas

8 para la respuesta № 1

Para una animación simple como desvanecerse / desaparecer, necesita las siguientes clases de CSS:

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

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

---

ACTUALIZAR:

Si tiene otra transición en el elemento que no desea que se vea afectado, use las siguientes definiciones de CSS para aplicar solo las transiciones en el desvanecimiento de entrada / salida:

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

---

Ver, también, este demo corta.

---

0 para la respuesta № 2

La respuesta anterior de ExpertSystem es correcta. Sin embargo, si todavía no puede hacer que la animación funcione en Angular, debe asegurarse de que se agregue el módulo ngAnimate a su aplicación:

El módulo ngAnimate proporciona soporte para animaciones basadas en CSS (fotogramas clave y transiciones), así como animaciones basadas en JavaScript a través de enlaces de devolución de llamada.

Ver Fuente: https://docs.angularjs.org/api/ngAnimate

Esto se puede hacer en su código que define su aplicación AngularJS de la siguiente manera:

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

---