UPD: It's almost solved, problem was beacouse I've added second 'class' attribute in my div. Now it is works, but I still cant see animation of ng-repeat and now I have question N2 : how to make collapsing and expending time different? I want my divs collapsing three time faster then when they're expending. Current Plank.
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: </b>{{user.name}}, <b>Age: </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;
}
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.
