AngularJS Example

by revolunet

HTML

<div ng-app="App">
  Click me: <input type="checkbox" ng-model="checked"><br/>
  <div>
    Show:
    <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>
</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-animate.min.js"></script>
<style>.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-add,
.animate-show.ng-hide-remove {
  display:block!important;
}

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

.check-element {
  padding:10px;
  border:1px solid black;
  background:white;
}

JavaScript

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