angularjs – 你如何动画ng-show?

前端之家收集整理的这篇文章主要介绍了angularjs – 你如何动画ng-show?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在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进行演示.

解决方法

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

有几点需要注意:

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

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

Fiddle.

猜你在找的Angularjs相关文章