angular show/hide CSS

the angular way to show hide elements

by method7

HTML

<div ng-app="App">
  Click me: <input type="checkbox" ng-model="checked"><br/>
    <div style="position:relative;height: 56px;overflow: hidden;">
        <div class="check-element animate-show" ng-show="checked">
          <span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
        </div>
        
        <div class="check-element animate-show" ng-hide="checked">
          <span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
        </div>
    </div>
    <code>https://docs.angularjs.org/guide/animations</code>
</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.min.js"></script>
<style>

.animate-show.ng-hide-add, 
.animate-show.ng-hide-remove {
  -webkit-transition: opacity ease-in-out 0.5s;
  -moz-transition: opacity ease-in-out 0.5s;
  -o-transition: opacity ease-in-out 0.5s;
  transition: opacity ease-in-out 0.5s;
  display: block !important;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove {
  opacity: 0;
}

.animate-show.ng-hide-remove.ng-hide-remove-active,
.animate-show.ng-hide-add {
  opacity:1;
  border:1px solid black;
  background:white;
}

.check-element {
  line-height:20px;
  padding: 10px;
  border:1px solid black;
  background:white;
  position: absolute;
}

JavaScript

angular.module('App', ['ngAnimate']);