css - 使用 ngAnimate 删除上面的元素时如何使元素 float

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;
}

希望这对您有所帮助。