I have a dynamic list of items using ng-repeat. When something happens an item may disappear. I have handled smoothly animating the removal of these items using ng-animate, but after they are gone, the remaining items simply snap to their new position. How can I animate this movement smoothly?
I've tried applying an "all" transition to the repeated class and using ng-move with no success.
The State Change Expression instructs Angular when to run the transition's animations, it can either be. a string with a specific syntax. or a function that compares the previous and current state (value of the expression bound to the element's trigger) and returns true if the transition should occur or false otherwise.
To disable all animations for an Angular app, place the @. disabled host binding on the topmost Angular component.
You can achieve this by animating the max-height
property. Check out this sample:
http://jsfiddle.net/k4sR3/8/
You will need to pick a sufficiently high value for max-height
(in my sample, I used 90px). When an item is initially being added, you want it to start off with 0 height (I'm also animating left
to have the item slide in from the left, as well as opacity
, but you can remove these if they don't jibe with what you're doing):
.repeated-item.ng-enter {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
max-height: 0;
opacity: 0;
left: -50px;
}
Then, you set the final values for these properties in the ng-enter-active
rule:
.repeated-item.ng-enter.ng-enter-active {
max-height: 90px;
opacity: 1;
left: 0;
}
Item removal is a bit trickier, as you will need to use keyframe-based animations. Again, you want to animate max-height
, but this time you want to start off at 90px and decrease it down to 0. As the animation runs, the item will shrink, and all the following items will slide up smoothly.
First, define the animation that you will be using:
@keyframes my_animation {
from {
max-height: 90px;
opacity: 1;
left: 0;
}
to {
max-height: 0;
opacity: 0;
left: -50px;
}
}
(For brevity, I'm omitting the vendor-specific definitions here, @-webkit-keyframes
, @-moz-keyframes
, etc - check out the jsfiddle above for the full sample.)
Then, declare that you will be using this animation for ng-leave
as follows:
.repeated-item.ng-leave {
-webkit-animation:0.5s my_animation;
-moz-animation:0.5s my_animation;
-o-animation:0.5s my_animation;
animation:0.5s my_animation;
}
Basics
In case anyone is struggling with figuring out how to get AngularJS animations to work at all, here's an abbreviated guide.
First, to enable animation support, you will need to include an additional file, angular-animate.js
, after you load up angular.js
. E.g.:
<script type="text/javascript" src="angular-1.2/angular.js"></script>
<script type="text/javascript" src="angular-1.2/angular-animate.js"></script>
Next, you will need to load ngAnimate
by adding it to the list of your module's dependencies (in the 2nd parameter):
var myApp = angular.module('myApp', ['ngAnimate']);
Then, assign a class to your ng-repeat
item. You will be using this class name to assign the animations. In my sample, I used repeated-item
as the name:
<li ng-repeat="item in items" class="repeated-item">
Then, you define your animations in the CSS using the repeated-item
class, as well as the special classes ng-enter
, ng-leave
, and ng-move
that Angular adds to the item when it is being added, removed, or moved around.
The official documentation for AngularJS animations is here:
http://docs.angularjs.org/guide/animations
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With