你如何动画ng-show？

Question

我想在ng-show = false上淡出UL。我添加了这个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;
}

但是当ng-show设置为false时，它会立即消失。如何让它淡出而不是立即消失？

单击此fiddle中的一个li进行演示。

Answer 1

我附上了一个小提琴解决方案。

有几点需要注意：

您在小提琴中包含的角度版本不支持css动画。您需要更新到1.2版本（还要求您将angular-animate.js文件和ngAnimate模块包含到您的应用中）

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

Fiddle