How to use ng-animate to add animations to an element in angularJS

<style>
    .fade {
        transition: opacity 1s;
    }

    .fade.ng-enter, .fade.ng-leave.ng-leave-active {
        opacity: 0;
    }
</style>

<div ng-app="animateApp" ng-controller="AnimateController">
    <p ng-class="{ 'fade': shouldFade }">This element fades in/out</p>
    <button ng-click="toggleFade()">Toggle Fade</button>
</div>

<script>
    var app = angular.module('animateApp', ['ngAnimate']);
    app.controller('AnimateController', function($scope) {
        $scope.shouldFade = true;

        $scope.toggleFade = function() {
            $scope.shouldFade = !$scope.shouldFade;
        };
    });
</script>