7

I am getting the class ng-animate applied to the directive but I'm not getting:

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

I have angular and angular-animate 1.3 loaded. and am including ngAnimate in app.js

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

The transitions are not happening:

.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;
    }
}
chovy
  • 72,281
  • 52
  • 227
  • 295

2 Answers2

8

For a simple animation 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 other transistion on the element that you don't want to get affected, use the following CSS definitions to only apply the transistions on the fading 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, also, this short demo.

gkalpak
  • 47,844
  • 8
  • 105
  • 118
  • The demo is build with angular-1.2, the question is regarding angular-1.3. Do you have a working example for angular-1.3? – marius Sep 19 '14 at 09:40
  • 1
    @JeffreyHammansson: I updated the demo. Nothing in the code has to change. I just updated the angular version to `1.3.0-rc.2` and it still works the same. Don't forget to upvote the answer if you find t useful :) – gkalpak Sep 19 '14 at 09:45
0

ExpertSystem's answer above is correct. However, if you still cannot get animation to work in Angular then you need to ensure that the ngAnimate module is added to your app:

The ngAnimate module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks.

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

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

var app = angular.module('myApp', ['ngAnimate']);
John McLaughlin
  • 1