AngularJS Example

by tamtakoe

HTML

<div ng-app="">
  Click me: <input type="checkbox" ng-model="checked"><br/><br/>
  <div>
    <div class="check-element"
          ng-show="checked"
          ng-animate="'example'">
              I show up when your checkbox is checked.<br/>
              I show up when your checkbox is checked.<br/>
              I show up when your checkbox is checked.<br/>
              I show up when your checkbox is checked.<br/>
              I show up when your checkbox is checked.<br/>
    </div>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<style>

.example-show, .example-hide {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -ms-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;
     overflow:hidden;
}

.example-hide.example-hide-active {
  max-height:0;
}

.example-show.example-show-active {
  max-height:1000px;
}

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