I'm currently struggling to create a simple move animation.
I am aiming for a similar effect to the one shown in this example (taken from another SO question).
So far, I have managed to achieve this using the .animation() method.
This is essentially what I am doing:
.animation('.move-to-top', [function() {
return {
addClass: function(element, className, done) {
var el = $(element);
var top = el.position().top;
el
.addClass('move-to-top')
.one('transitionend', function() {
setTimeout(function() {
el.css({
transform: 'scale(1.03) translateY(-' + (top+10) + 'px)'
})
.one('transitionend', function() {
setTimeout(function() {
el
.removeClass('move-to-top')
.css({
transform: 'scale(1) translateY(-' + (top) + 'px)'
})
}, 50);
el.prevAll('.timetracking-item')
.css({
transform: 'translateY(' + el.height() + 'px)'
});
});
}, 100);
});
}
}
}]);
For the move-to-top class, it performs the following:
.move-to-top {
@include vendor(transition, all 400ms ease-in-out);
@include vendor(transform, scale(1.03) translateY(-10px));
position: relative;
z-index: 999;
}
The purpose of this animation is to:
- Add a class that scales and moves the item up slightly
- Move the item to the top using JavaScript
- Adjust the positions of previous elements to create space
- Remove the scaling added by the class
However, this approach relies on transforms, which may not be ideal. A cleaner solution would involve removing the transforms after the transitions are complete and physically moving the elements in the DOM.
An ideal scenario would utilize the combination of orderBy and ng-move, although this would require additional events like ng-pre-move and ng-after-move in ng-move.
Alternatively, if both addClass: fn() and move: fn() could be used together, with addClass firing before the element is moved, it would be more efficient. Unfortunately, this isn't possible when orderBy is applied.
The final option involves broadcasting an event from the .animation() function once all transitions are complete, and then sorting the array accordingly in the controller. However, this may lead to flickering due to the need to remove the style attribute from all items.
Are there any other suggestions or approaches that could be considered?