angularjs – 你如何动画ng-show？

发布时间：2020-12-17 17:18:51 所属栏目：安全来源：网络整理

导读：我想在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时,

我想在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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!