Anton Pegov Anton Pegov - 1 month ago 4
AngularJS Question

Can't run ngAnimate animation

Here is my example

And here is working example from the other SO question (I'm using absolutly the same method!)

I can't find out why animation not shown nither on ng-repeat, nor ng-show.
Html:

<body ng-controller="mainCtrl as vm" class="container">
<div ng-repeat="user in vm.users" class="repeat-item">
<my-user-info user="user"></my-user-info>
</div>
</body>


Directive code:

angular.module('main').directive('myUserInfo', function(){
var directive = {
templateUrl: 'userInfoCard.directive.html',
restrict: 'AE',
scope: {
user: '='
},
controller: ctrl
}
return directive;

function ctrl($scope){
console.log($scope)
$scope.knightMe = function(user){
//debugger;
user.rank = 'knight';
}
$scope.collapse = function(){
$scope.collapsed = !$scope.collapsed;
}
}


Directive template:

<div class="panel panel-primary">
<div class="panel-heading" ng-click="collapse()">
<h4 class="no-margin"><b>Name:&nbsp;</b>{{user.name}}, <b>Age:&nbsp;</b>{{user.age}}</h4>
</div>
<div class="panel-body" ng-show="!collapsed" class="fadein fadeout">
<div ng-show="!!user.address">
<h4>Address:</h4> {{user.address.street}}
<br /> {{user.address.city}}
<br /> {{user.address.country}}
<br />
</div>
<div ng-show="!!user.friends && (user.friends.length > 0)">
<h4>Friends:</h4>
<ul class="friends">
<li ng-repeat="friend in user.friends">{{friend}}</li>
</ul>
</div>
<div ng-show="!!user.rank"><h4>Rank: {{user.rank}}</h4></div>
<div ng-show="!user.rank">
<button class="btn btn-success" ng-click="knightMe(user)">Knight Me</button>
</div>
</div>
</div>


And css:

/* ====================== */

.fadein,
.fadeout {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
}

.fadein.ng-hide-remove,
.fadeout.ng-hide-add.ng-hide-add-active {
opacity: 0;
display: block !important;
}

.fadeout.ng-hide-add,
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
display: block !important;
}

/* ====================== */

.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
}

.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
opacity:1;
}


Result

The .ng-enter and .ng-enter-active CSS classes are generated and appended to the element by AngularJS when the ngIf tells it that it's adding a new item into the repeat list. Depending on the animation, other CSS classes are added.

Answer

Change

<div class="panel-body" ng-show="!collapsed" class="fadein fadeout">

to

<div class="panel-body fadein fadeout" ng-show="!collapsed">

you have two class declaration on the div. May be you wanted to do ng-class={'fadein fadeout' : !collapsed}.

Working plunkr: https://plnkr.co/edit/MsgJxp?p=preview

Check this SO post for Adding multiple class using ng-class

Comments