5

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?

Run
  • 54,938
  • 169
  • 450
  • 748

1 Answers1

9

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

Kalhan.Toress
  • 21,683
  • 8
  • 68
  • 92
  • Thanks for the update. I keep getting this error `Error: $animate.enter(...) is undefined` - it seems that it is a version problem or something else! – Run Dec 13 '14 at 12:30
  • got it working now. it is caused by the annoying differences in versions - `//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js`- just as I said before. anyway thanks. Angular is really a pain in the a** even though it is a perfect framework. – Run Dec 13 '14 at 12:34