Angular fadein and fadeout - the standard way without CSS?

Question

I find it extremely difficult to make an animation in angular, comparing to jquery. There are so many versions of angular animation fadein and fadeout that I found them from blogs/ tutorials/ etc, some of them are on older version of angular. Angular's seems to be very inconsistent when a newer version of it comes out to replace the old ones. I can't see any standard way of doing it. Hence I don't know where to start.

I just to fade in a form or a html doc when the button is clicked.

html,

<button ng-click="loadInclude" >Load Include Form</button>
<div ng-include="'form.php'" ng-if="readyToLoadForm===true"></div>

angular,

   var app = angular.module("myapp", ['ngAnimate']);

   app.controller("FormController",function($scope) {

            $scope.readyToLoadForm = false;
            $scope.loadInclude = function(e) {
                $scope.readyToLoadForm = true;
            };
        }
    );

any ideas?

Answer 1

you can use a ng-show or ng-hide in this case

<div ng-show="readyToLoadForm" class="animate-show animate-hide">TEST HERE</div>

when using angular-animate.js angular will add and remove several classes to this item when showing and hiding. based on that classes we can set a css animation to the element.

here is a simple plunker

---

for ng-include animation

ng-leave .ng-leave-active .ng-enter-active classes add to the element. there is a little desc about classes added when animating. and that desc is from ngAnimate

here is the ng-enter demo Plunker

---

here is the reference for how the classes assigned to the element when animation elements in angularjs