angularjs – 如何在ng-repeat中使用ng-animate缩小假期中的项目

发布时间：2020-12-17 07:28:37 所属栏目：安全来源：网络整理

导读：我正在尝试使用新的ng-animate指令,并且在与ng-repeat一起使用时正在努力获得所需的效果.我试图让物品在进入时生长,并在离开时收缩.到目前为止,输入正在运行,但缩小动画失败了. 我在这里设置了一个小提琴,所以你可以看到我的问题： – http://jsfiddle.net/r

我正在尝试使用新的ng-animate指令,并且在与ng-repeat一起使用时正在努力获得所需的效果.我试图让物品在进入时生长,并在离开时收缩.到目前为止,输入正在运行,但缩小动画失败了.

我在这里设置了一个小提琴,所以你可以看到我的问题： –

http://jsfiddle.net/rpk98c/6t42M/1/

相关的HTML是： –

<ul>
    <li ng-animate="{enter: 'repeat-enter',leave: 'repeat-leave',move: 'repeat-move'}" ng-click="remove($index)" ng-repeat="name in names">{{name}}</li>
</ul>

和相关的CSS： –

.repeat-enter-setup,.repeat-leave-setup,.repeat-move-setup {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}

.repeat-enter-setup {
    max-height: 0;
    opacity:0;
}
.repeat-enter-setup.repeat-enter-start {
    max-height: 250px;
    opacity:1;
}
.repeat-leave-setup {
    opacity:1;
    max-height: 250px;
}
.repeat-leave-setup.repeat-leave-start {
    opacity:0;
    max-height: 0;
}

谁知道我哪里出错了？

谢谢,

瑞安

ps刚刚在IE 10中注意到没有动画工作！我现在正在使用Chrome进行测试

您需要切换css的第一行以影响“开始”类而不是设置类.我知道,这不是他们如何做的例子,但它会起作用.所以做到：

.repeat-enter-start,.repeat-leave-start,.repeat-move-start {
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -ms-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition:all linear 1s;
}

这有帮助,因为您正在尝试为元素通常不具备的属性设置动画.元素通常不会设置max-height属性.因此,当您在转换的同时应用最大高度时,它将为您添加属性提供动画！这是在“start”类被应用之前,这意味着在开始阶段应该开始之前,设置阶段将不会完成(因为动画需要1秒).因此,当您应用“离开”动画时,将执行以下步骤.

>您的元素在没有最大高度的情况下开始.
>应用“离开设置”类,为您提供最大高度和过渡.
>因为max-height只是“改变”(从不存在到现有)并且你有一个转换,浏览器现在开始设置max-height的动画,从一些默认的起始值(看似0)到你选择的250px的值,所以元素立即缩小到0并开始动画！
>现在应用了“leave-start”类,但步骤3还没有完成！最大高度仍为0或接近,因为它仍然忙于动画插入属性,因此动画停止并再次变为0,我们从未看到任何内容.

但是如果我们将过渡属性从“setup”-step移动到“start”-step,就像上面的css一样,第3步将是即时的,因为它没有转换.转换首先出现在第4步.所以我们有：

>您的元素在没有最大高度的情况下开始.
>应用“离开设置”类并为您提供最大高度但不过渡.
>我们没有过渡,因此最大高度立即变为250px.
>现在应用了“leave-start”类,并且由于第3步完成,这次最大高度现在是250px,我们可以在没有问题的情况下远离它.

你没有这个不透明度的问题,因为你是从默认值1动画,没有动画可以阻止在步骤3中.似乎输入事件处理有点不同,因为它们更有可能从非默认值设置动画,因此您不会在任何事件上看到此行为.

编辑：

我对此进行了更多的实验,结果证明我的答案对Firefox不起作用(至少不适用于FF Windows).首先,如果您为非现有属性设置动画,FF似乎只是直接失败,因此您需要确保元素从一开始就具有最大高度,例如：

li {
    max-height: 250px;
}

这个修复留给我,但由于某种原因,根本没有输入动画将在Windows上的Firefox中工作.还在努力想出那一个.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!