Animation angularjs not working

Question

I'm trying to animate a div on click. When i click on a link a div should be appear and that div i clicked disappear. I made an example here:

http://plnkr.co/edit/703244UJ0hcG9GjkOjOz?p=preview

By the way this is some code:

 <a class="" ng-click="showDetails" ng-if="!showDetails">
        Expand 
    </a>


  <div class="animate-if" ng-if="showDetails">

  Details!!
  <a style="cursor:pointer;" ng-click="!showDetails">
      Close
  </a>
  </div>

  {{showDetails}}
</body>

Angular

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

app.controller('MainCtrl', function($scope, $window) {
 showDetails = false;

});

css:

.animate-if.ng-enter, .animate-if.ng-leave {
  -webkit-transition: 1s linear all;
  -moz-transition: 1s linear all;
  -ms-transition: 1s linear all;
  -o-transition: 1s linear all;
  transition: 1s linear all;
}
.animate-if.ng-enter {
  max-height: 0;
  opacity: 0;
}
.animate-if.ng-enter.ng-enter-active {
  max-height: 999px;
  opacity:1;
}
.animate-if.ng-leave {
  max-height: 999px;
  opacity:1;
}
.animate-if.ng-leave.ng-leave-active {
  max-height: 0;
  opacity:1;
}

So, when i click "Expand" should be appear the div with class: animate-if and disappear this one:

<a class="" ng-click="showDetails" ng-if="!showDetails">
        Expand 
    </a>

Then, when i click Close should be disappear the div : animate-if and re-appear the link "Expand" again. Of course using the animation. Actually not working. Not appears or disappears.

Didn't you forget about including ng-animate.js ? It may be a dumb question but I sometimes forgot it .. — tektiv
– tektiv, Commented May 11, 2015 at 13:29

semirturgay · Accepted Answer · 2015-05-11 13:42:20Z

0

You need a toggle function that will toggle the value of showDetail variable on click expand div.

js :

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

app.controller('MainCtrl', function($scope, $window) {
 $scope.showDetails = false;
 $scope.toggleDetails =function (){
   $scope.showDetails = !$scope.showDetails; 

 }
});

html :

<body ng-controller="MainCtrl">
   <a class="" ng-if="!showDetails" ng-click="toggleDetails()">
        Expand 
    </a>
  <div class="animate-if" ng-if="showDetails">
    Details!!
  <a style="cursor:pointer;"  ng-click="toggleDetails()">
      Close
  </a>
  </div>
   {{showDetails}}
</body>

demo

edited May 11, 2015 at 13:42

answered May 11, 2015 at 13:34

semirturgay

4,1993 gold badges32 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Atlas91 Over a year ago

Ok it works now with the function but see here the problem; i added ng-if="!showDetails" in the Expand link. So when i click it disappear and appear the div in correct way.. But when i click over "Close" the "Expand" word appears before the div with "Close" disappear.. This is what i mean: plnkr.co/edit/wCWoLxYrId38G2PDLPu1?p=preview

semirturgay Over a year ago

@End.Game i was mistakenly removed the ng-if directive from expand div. happy for you.. :)

Atlas91 Over a year ago

Is there a way maybe to detect when the animation finish?

semirturgay Over a year ago

@End.Game check here sitepoint.com/css3-animation-javascript-event-handlers

Atlas91 Over a year ago

Yes i tried to check that link you posted but without success.. Have you idea how can i use it in my situation?

|

Collectives™ on Stack Overflow

Animation angularjs not working

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related