AngularJS Example

by adiioo7

HTML

<div ng-app="App">Click me:
    <input type="checkbox" ng-model="checked" ng-init="checked=true" />
    <br/>Show when checked:
    <div class="div2" ng-if="checked">ABC</div>
    <div class="div3" ng-if="checked">KLM</div>
    <div class="div4" ng-if="checked">PQR</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.0-rc.3/angular.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.min.js"></script> <style>.animate-if {
    background:white;
    border:1px solid black;
    padding:10px;
}
.animate-if.ng-enter, .animate-if.ng-leave {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.animate-if.ng-enter, .animate-if.ng-leave.ng-leave-active {
    opacity:0;
}
.animate-if.ng-enter.ng-enter-active, .animate-if.ng-leave {
    opacity:1;
}

JavaScript

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