Question

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

当点击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;
}

fiddle

在移除时动画重复重复

1 个答案: