AngularJS Example

by robcampo

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>
<script src="https://code.jquery.com/jquery-1.11.0.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-fade" ng-show="checked">
          <span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
        </div>
        <div class="check-element animate-fade" ng-hide="checked">
          <span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
        </div>
    </div>
</div>

CSS

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

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

/* Action we're showing */
.animate-fade.ng-hide-remove {
    -webkit-transition: all 1s ease 1s;
    transition: all 1s ease 1s;
    opacity: 0;
}

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

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

.animate-fade {
    position: absolute;
}

JavaScript

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

angular.module('App').directive("animateFade", function() {
    return {
        restrict: "C",
        link: function(scope, element) {

            // Get the height of this element and it's parent height
            var height = $(element).height();
            var parentHeight = $(element).parent().height();

            // If this element's height is greater than that of the parent,
            // update the parents's height. Always pick the largest one as this
            // will mean no flickering.
            if (height > parentHeight) {
                $(element).parent().height(height);
            }
        }
    }
});