移除时对ng-repeat进行动画处理

Question

考虑以下示例： http : //jsfiddle.net/HB7LU/23956/
按钮可以正确地添加和删除工作，其动画也是如此。 这是我的问题：单击删除按钮时如何为元素设置动画，以便要删除的元素下的所有元素都将缓慢浮动，而不仅仅是跳到新位置？

单击B的remove后，我想分别将C和D设置为B和C的先前位置的动画。

remove
B remove
C remove
D remove

由于响应式设计，使用maxheight的解决方案不是可取的。 谢谢。

Answer 1

这可以是一个解决方案：

@keyframes animateIn {
    0%   { opacity: 0; transform: translate(0,-25px);}
    100% { transform: translate(0,0px); }
}
@keyframes animateUp {
    0%   { transform: translate(0,0px); }
    100% { transform: translate(0,-25px);}
}

@keyframes animateOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

div.animate-repeat.ng-enter,
div.animate-repeat.ng-enter-active {
    animation: animateIn 0.5s;
}

div.animate-repeat.ng-leave,
div.animate-repeat.ng-leave-active ~ div.animate-repeat{
    animation: animateUp 0.5s;
}
div.animate-repeat.ng-leave-active{
    animation: animateOut,animateUp 0.5s;
}

小提琴