Chapter 3: Creating a simple fade in/out animation

HTML

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.2/angular-animate.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <label>
            <button ng-click="boxHidden=!boxHidden">
                Toggle Visibility
            </button>
        </label>
        <div class="animated-container" ng-hide="boxHidden">
            Awesome text!
        </div>
    </div>
</div>

CSS

.animated-container {
    padding: 20px;
    border: 5px solid black;
}
.animated-container.ng-hide-add, 
.animated-container.ng-hide-remove {
    transition: all linear 2s;
}
.animated-container.ng-hide-remove,
.animated-container.ng-hide-add.ng-hide-add-active {
    opacity: 0;
}
.animated-container.ng-hide-add,
.animated-container.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

JavaScript

angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function($scope) {
    $scope.boxHidden = true;
});