css - 动画 ng-repeat on Remove

Question

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

单击 B 的 remove 时，我想将 C 和 D 动画化到 B 和 C 的先前位置，恭敬地。

删除
B 删除
C 删除
D 删除

由于响应式设计，使用 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;
}

fiddle