Chapter 3: Creating enter animations with ng-if

by billy roberts

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>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <button ng-click="visible=!visible">Toggle</button>
        <span class="target" ng-if="visible">Bring me in!</span>
    </div>
</div>

JavaScript

// same (ng-if) as below using jQuery
// can't be done with jQLite
angular.module('myApp', ['ngAnimate'])
.controller('Ctrl', function ($scope) {
    $scope.visible = false;
})
.animation('.target', function () {
    return {
        enter: function (element, done) {
            $(element)
                .css({
                'opacity': 0
            });
            $(element)
                .animate({
                'opacity': 1
            },
            1000,
            done);
        }
    };
});