Ng-animate does not work in 1.3

Question

I get the ng-animate class applied to the directive, but I don't get:

ng-hide-remove.ng-hide-remove-active or .ng-hide-remove.ng-hide-remove-active

I have angular and angular animation 1.3. and I include ngAnimate in app.js

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

Transitions do not occur:

 .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

For simple animations like fading in / out, you need the following CSS classes:

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

---

UPDATE

If you have another transition to an element that you do not want to receive, use the following CSS definitions to apply only transistors when in / out attenuation:

 .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 also this short demo .

Answer 2

The expert answer above is correct. However, if you still cannot get the animation to work in Angular, you need to make sure that the ngAnimate module is added to your application:

The ngAnimate module provides support for CSS-based animations (keyframes and transitions), as well as JavaScript-based animations using callbacks.

See Source: https://docs.angularjs.org/api/ngAnimate

This can be done in the code that defines your AngularJS application as follows:

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