动画 ng-repeat 删除

【问题标题】：Animating ng-repeat on Remove动画 ng-repeat 删除
【发布时间】：2016-05-29 06:19:03
【问题描述】：

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

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

一个remove
乙remove
Cremove
D remove

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

【问题讨论】：

标签： css angularjs animation angularjs-ng-repeat ng-animate

【解决方案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

【讨论】：

这绝对是一个开始，但是现在被移除的元素下的所有元素都是先消失然后重新出现。我希望它们漂浮起来。谢谢:)
检查编辑，您可以删除第二个 animateUp 以使删除的元素褪色而不是移动和褪色.....更好的结果恕我直言