Angular - 从ngRepeat中删除后，剩余的项目不能平滑滑动，而是快速/跳转到位

Question

我正在使用AngularJS v1.4.8，我在控制器中包含/注入了ngAnimate。

我正在使用绑定到数组的ngRepeat构建动态列表。 添加和更新列表中的项目非常有效，动画按预期运行。 但是，当我从列表中删除一个项目时，所有尾随元素（即已删除项目下面的元素）都会捕捉到位。 我希望尾随元素优雅地滑入到位。

重申一下。目前，当我删除项目时，尾随项目会捕捉到正在删除的元素留下的空白区域。我希望尾随项目能够平滑地滑入空白区域。

我尝试过使用max-height，将其设置为输入的固定值，然后设置为0表示离开。这根本不起作用 - 没有任何反应。 （即没有任何缩小）。

CSS的哪个部分会处理这个问题？

• ng.enter
• ng.leave
• ng.move（偷偷摸摸地怀疑它不会是这个，因为大多数例子都是指拖放功能）

查看

这就是HTML“列表”的样子：

<div ng-repeat="cItem in commentData.comments" class="animate-repeat">

的 CSS

这是我目前的CSS

.animate-repeat.ng-enter,
.animate-repeat.ng-move
{
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    opacity:0;
}

.animate-repeat.ng-leave
{
    -webkit-animation:0.5s fadeOut;
    -moz-animation:0.5s fadeOut;
    -o-animation:0.5s fadeOut;
    animation:0.5s fadeOut;

    opacity:1;
}

.animate-repeat.ng-enter.ng-enter-active,
.animate-repeat.ng-move.ng-move-active
{
    opacity:1;
}

.animate-repeat.ng-leave.ng-leave-active
{
    opacity: 0;
}


/* Did this for all platforms - not showing here though */
fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

屏幕转储

删除前

删除时

Answer 1

试试这个：

.animate.ng-enter, 
.animate.ng-leave
{ 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
    overflow: hidden;
    text-overflow: clip;
    white-space:nowrap;
} 

.animate.ng-leave.animate.ng-leave-active,
.animate.ng-enter {
    opacity: 0;
    width: 0px;
    height: 0px;
}

.animate.ng-enter.ng-enter-active, 
.animate.ng-leave {
    opacity: 1;
    width: 150px;
    height: 30px;
}

.ng-move{
  border: 1px solid red;
}

Answer 2

您应该为幻灯片转换添加样式（边距，绝对位置或块内部变换，隐藏溢出）。 除此之外，如果你和＆＃34;追踪＆＃34;你的ng-repeat指令你将能够创建重新排序动画。没有通过$ index跟踪数组中的角度跟踪项目，并且在删除第二个之后，将在第二个位置上呈现第三个。如果你给角度一些独特的关键来跟踪项目，它将知道第三个成为第二个并且不会重新渲染它，但是移动到第二个位置。希望这会有所帮助。