如何根据动作有选择地应用动画[关闭]。

问题描述 投票:0回答:1

我想在用户添加项目时应用淡入动画,在删除项目时应用淡出动画,但没有成功。

https:/stackblitz.comeditangular-animation-fade-in-pfets4?file=app%2Fapp.component.html。

angular animation angular-animations
1个回答
0
投票

好吧,我已经修改了一下你的代码,Angular Animation暴露的API用于动态显示元素的动画--你可以使用 :enter:leave psuedo选择器在动画定义里面,对那些特定的元素应用动画。

但是你的情况比较特殊,因为你每次都想删除最后一个元素,而仅仅从数组中删除会造成Animation执行到需要从DOM中删除的变化检测器之间的混乱,这种情况下应该做的是使用Angular Animation Done Event--只有这样才能从数组中删除项目,但是这样我们又有了新的问题,因为我们不想等待每一个项目被删除吧?所以我们还是想在每次删除项目的时候显示动画,我们要做的是将每个项目标记为已删除,并且在每次fadeOut done事件中,我们要做的是从数组中弹出项目。

下面是一个工作示例。

https:/stackblitz.comeditangular-animation-fade-in-efni2n。

© www.soinside.com 2019 - 2024. All rights reserved.