How do you animate ng-show?

Question

I would like to weaken 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 disappears instantly. How to make it disappear, not instantly disappear?

Click on one of them in the fiddle for a demo.

Answer 1

I attached a solution for the violin.

A few notes:

The version of angular that you included in your script does not support css animation. You will need to update version 1.2 (which also requires the inclusion of the angular -animate.js file and the ngAnimate module in your application)

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

Fiddle .