使用ngAnimate删除上面的元素时如何使元素浮动

Question

我有一个可以添加和删除的元素列表。

<div id="container" ng-repeat="element in elements">
    <button ng-click="remElement($index)">x</button>
</div>

现在您可以在我的Fiddle 中看到，当您删除一个元素时，它会上升并消失。我发现被删除元素下的元素如何等到动画结束然后跳起来令人不快。有没有办法让上面的元素开始上浮时，让元素瞬间平滑上浮？

Answer 1

不确定这是否是您要查找的内容，但我认为您可以通过在容器 css 元素中添加高度来轻松完成此操作，如下所示：

#container.ng-enter.ng-enter-active,
#container.ng-leave {
    opacity: 1;
    top: 0px;
    height:80px;
}

#container.ng-leave.ng-leave-active,
#container.ng-enter {
    opacity: 0;
    top: -50px;
    height:0px;
}

希望这会有所帮助。