How do you animate ng-show?

Question

I would like to fade out a UL on ng-show=false. I add this css:

ul {
    -webkit-transition: all 2s;
    transition: all 2s;
}

.ng-show-remove,
.ng-show-add,
.ng-hide-remove,
.ng-hide-add {
    display:block!important;
}

ul.ng-hide {
    opacity: .2;
}

But when ng-show is set to false it just instantly disappears. How do I get it to fade out instead of instantly disappearing?

Click one of the li in this fiddle for a demonstration.

Answer 1

I've attached a fiddle solution.

A few things to note:

The angular version you included in your fiddle doesn't support the css animations. You'll need to update to the 1.2 version (which also requires you to include the angular-animate.js file and the ngAnimate module into your app)

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

Fiddle.