i am tying to achieve an Animation in Angular JS 1.4.0, which i'd like to be similar to the one, which can be found on this page (Angular 1.1.5): http://www.nganimate.org/angularjs/ng-repeat/move
As I understand, there have been major changes to ngAnimate over the last few Versions.
I have recreated the important Part of my application with Plunkr. It can be found here http://plnkr.co/edit/9DK3LEAaGDgDT2kIILjG?p=preview
I want the Items, that show and hide, because of a different filter input, to be animated with a css animation.
This is my filter input:
<input type="text" class="form-control" ng-model="search">
And this is the list, in which all the Elements from the search show up.
<ul>
<li ng-class="item" ng-repeat="name in people | filter:search">
<a href="#"> {{name.name}} </a>
</li>
</ul>
Here are my CSS animations:
.item.ng-enter,
.item.ng-leave
{
-webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: relative;
display: block;
}
.item.ng-enter.item.ng-enter-active,
.item.ng-leave {
opacity: 1;
top: 0;
height: 30px;
}
.item.ng-leave.item.ng-leave-active,
.item.ng-enter {
opacity: 0;
top: -50px;
height: 0px;
}
The search and filters work fine, but the CSS animations are not triggered.
I would be very glad, if someone had a solution to this problem!
The latest version like angular 1.4 the approach is bit different. First of all you should include angular animate js.
Then you should inject 'ngAnimate' to module like this.
also use class like this in along with ng-reapeat
also use css for animate like below
more references