如何使用ng-animate动画从ng-repeat中移除未知高度的项目?

时间:2016-07-28 07:41:52

标签: javascript css angularjs animation frontend

我看过这个例子:

How can I animate the movement of remaining ng-repeat items when one is removed?

但它没有做我想做的一切。我有这样的事情:

<div class="please-work" ng-repeat="item in array track by item.id">
    {{item}}
<button ng-click="removeItem(item)">del</button>
</div>

当我像这样使用ng-animate时:

.please-work.ng-leave {
  transition:0.5s linear all;
  opacity:1;
}
.please-work.ng-leave.ng-leave-active {
  opacity:0;
}

该项目很好地淡出,但其后的其他元素跳入位置。

我在顶部链接的答案有一个解决方法,但它需要知道元素的高度(以像素为单位)。基本上,它表示将元素的高度从其原始高度设置为零,以便创建所需的滑动效果。我的问题是我的元素有不同的高度,我不知道如何引用css动画开始的这个起始高度。有没有办法做到这一点?提前谢谢你,这是一场漫长的夜晚。

编辑:我误解了给定的例子。动画最大高度(不是高度)类型的工作,但它有点不精确。有没有更干净的方法?

另外,我不一定要在视觉上改变高度,尽管我很确定我可以使用隐形包装器来解决这个问题。另外,如果我想在其他元素中为其余元素设置动画,该怎么办?其他方式?

0 个答案:

没有答案