angularjs - 你如何为 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

我附上了一个 fiddle 解决方案。

需要注意的几点:

您包含在 fiddle 中的 Angular 版本不支持 css 动画。您需要更新到 1.2 版本(这还需要您将 angular-animate.js 文件和 ngAnimate 模块包含到您的应用程序中)

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

Fiddle .