gpt4 book ai didi

angularjs - 动画 ngRepeat

转载 作者:行者123 更新时间:2023-12-02 01:55:15 34 4
gpt4 key购买 nike

我正在构建一个旋转木马,方法是从数组的开头移动一个元素,然后将其推回到末尾,使旋转木马前进。从数组末尾弹出一个元素并将其取消移位到数组的开头将倒回该元素。这很好用。当我尝试为它制作动画时,问题就出现了。

ng-repeat 项目应该在重复列表中的位置发生变化时广播“移动”事件。然而,似乎只有重复列表中的某些项目在其索引更改时触发移动事件。

查看我的 Plunker 示例:http://plnkr.co/edit/PxeTeqks9sXNM4d2lE79?p=preview

当您单击“shift - push”时,除最后一个数字外的所有数字都会动画化。单击“pop - unshift”仅对第一个数字进行动画处理。

我认为当重复列表中的每个项目的索引都发生变化时,所有项目都应该触发移动事件。这是不正确的吗?

最佳答案

动画在 Angular 1.2 中发生了重大变化。如果您还没有使用它,您绝对应该考虑切换到 1.2 或更高版本。

现在您必须包含 angular-animate.js 文件,因为 AngularJS 的核心不再支持动画。基本上旧的 ngAnimate 指令现在已被弃用。相反,您可以使用纯 CSS 为所有内容设置动画。

对您来说,这意味着您可以为 .ng-enter、.ng-leave 和 .ng-move 声明一些 CSS 样式,以便为您的 ng-repeat 中的项目设置动画。有关示例,请查看以下链接:

http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-ngrepeat

在此处检查 Plunker 示例:

http://plnkr.co/edit/?p=preview

关于angularjs - 动画 ngRepeat,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20579200/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com