ngAnimate不使用Angular 1.2.16

时间:2014-11-18 09:50:50

标签: javascript angularjs ng-animate

我的问题已经说明了,因此这里有代码的掠夺者:

http://plnkr.co/edit/p8LGG7STxjd8gFr2OJhy?p=preview

html投资回报率

<div class="check-element animate-show" ng-show="checked">
    <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
</div>

和css一个

.animate-show {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
}

.animate-show.ng-hide {
line-height:0;
opacity:0;
padding:0 10px;
}

正如您所看到的,我刚刚使用angularJs ngAnimate doc for ngShow并使用angular和ngAnimate版本更改了plunker以匹配我所关注的版本。

任何人都有这方面的提示吗?

提前致谢。

1 个答案:

答案 0 :(得分:1)

问题是您还需要为ng-hide-add-activeng-hide-add-remove添加课程:

.ng-hide-add-active, .ng-hide-remove {
    display: block !important;
}

否则ng-hide类会使元素立即消失,因为它具有非常高的优先级(display:none!important)。上面的类取消了这种行为,使动画有机会应用其转换规则。

演示:http://plnkr.co/edit/A8KEy5CNuEyyYrYMts9e?p=preview