Show, Hide and Toggle Alternatives

What?

Instead of doing ng-show and ng-hide which simply sets display:block/none a ui-show and ui-hide class will be added which can give you tighter control over how things appear or disappear.

Toggle State: {{!!showHideAn}}

Show Hide Toggle

Why?

CSS3 transitions of course! Applying a class means you can specify exactly how these two states behave. In addition, the show/hide variants do not enforce css rules when they are false (unless you use toggle), so the default CSS can still apply.

But can't you just do ng-class="{ ui-show : someExpression }"?

... shutup.

In all seriousness, this is just a convenience wrapper for using ng-class. This way you can simply swap out instances of ng for ui to immediately get your customized approach.

How?

<p><a ng-click="showHide=!showHide">Toggle State: {{!!showHide}}</a></p>
<div ui-show="showHide">Show</div>
<div ui-hide="showHide">Hide</div>
<div ui-toggle="showHide">Toggle</div>

<style>
.ui-show {
  color: blue;
  transition: all 0.5s ease; /* You should probably browser-prefix this */
}
.ui-hide {
  opacity: 0;
  transition: all 0.5s ease; /* You should probably browser-prefix this */
}
</style>

Using ui-show or ui-hide will add a class of the same name when the expression is true.

Use ui-toggle if you want to leverage both classes, as ui-show will be added when true and ui-hide when false.