My problem is already stated, thus here's the plunker with the code:
http://plnkr.co/edit/p8LGG7STxjd8gFr2OJhy?p=preview
the html ROI
<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>
and the css one
.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;
}
As you can see, I just took angularJs ngAnimate doc for ngShow and changed the plunker with angular and ngAnimate versions to match the one I am intested in.
Anyone has a tip on this?
Thanks in advance.
The problem is that you also need to add classes for ng-hide-add-active and ng-hide-add-remove:
.ng-hide-add-active, .ng-hide-remove {
display: block !important;
}
Otherwise ng-hide class makes elements immediately disappear, because it has very high priority (display: none !important). Above classes cancel this behavior giving animation a chance to apply its transition rules.