I'm new to Angular and I'm trying around with some things. My App works with Angular 1.2.8. I want to animate a list - I also found a workin example for ng-animate working together with ng-repeat. But this one uses Angular 1.1.5. I wasn't able to get it running under another version, regardless of which I tried?!
html
<div ng-init="items=['Lorem', 'Ipsum', 'Dolar', 'Sit', 'Consectetur', 'Adipisicing', 'Elit', 'Sed', 'Do'];">
<input type="text" ng-model="search" class="search-query" style="width: 80px" />
<ul>
<li ng-animate="'animate'" ng-repeat="item in items | filter:search">
<a href="#"> {{item}} </a>
</li>
</ul>
css
.animate-enter,
.animate-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;
}
.animate-enter.animate-enter-active,
.animate-leave {
opacity: 1;
top: 0;
height: 30px;
}
.animate-leave.animate-leave-active,
.animate-enter {
opacity: 0;
top: -50px;
height: 0px;
}
See this fiddle (AngularJS 1.1.5)
See this fiddle (AngularJS 1.2.8)
The only difference between these fiddles is the angular.js. I tried to add angular-animate.js as well, but with no success.
How can that be? What am I doing wrong?
Thank you for any help you can provide.