Angular fadein and fadeout - standard way without CSS?

Question

It is very difficult for me to make animations in angular compared 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 in the old version of angular. angular seems very inconsistent when a newer version replaces the old ones. I do not see any standard way to do this. So I don’t know where to start.

I just disappear in a form or html document when a 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 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 for this element when showing and hiding. Based on these classes, we can set the css animation for the element.

here is a simple plunker

---

for ng-include animation

ng-leave .ng-leave-active .ng-enter-active classes are added to the element. animation adds a bit about classes. and this is desc from ngAnimate

here is the ng-enter plunker daemon

---

here is a link for how the classes assigned to an element when animation elements in angularjs