AngularJS Example

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular-animate.min.js"></script>
<div ng-app="App">
  Click me: <input type="checkbox" ng-model="checked"><br/>
    <div style="border: 1px solid black;">
        <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>
</div>

CSS

/* Action we're hiding */
.ng-hide-add {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 1;
}

.ng-hide-add-active {
    opacity: 0;
}

/* Action we're showing */

.ng-hide-remove {
   
    transition: all 1s ease 1s;
    opacity: 0;
}

.ng-hide-remove-active {
    opacity: 1;
}

.ng-hide-add, .ng-hide-remove {
    display: block !important;
}

JavaScript

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