Anton Pegov Anton Pegov - 1 year ago 62
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.

<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>

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){
$scope.knightMe = function(user){
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>{{}}, <b>Age:&nbsp;</b>{{user.age}}</h4>
<div class="panel-body" ng-show="!collapsed" class="fadein fadeout">
<div ng-show="!!user.address">
<h4>Address:</h4> {{user.address.street}}
<br /> {{}}
<br /> {{}}
<br />
<div ng-show="!!user.friends && (user.friends.length > 0)">
<ul class="friends">
<li ng-repeat="friend in user.friends">{{friend}}</li>
<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>

And css:

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

.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;
}, {
opacity: 0;
display: block !important;
}, {
opacity: 1;
display: block !important;

/* ====================== */, {
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
}, {
}, {


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 Source


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


<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:

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download