时间戳

首页 > 解决方案 > 角度动画应用于元素重新排列

angular - 角度动画应用于元素重新排列

问题描述

在 ngFor 中，我使用 angular 的“触发器”属性来模仿 angular 中的手风琴行为。

最初，我将所有具有动画状态的列表元素隐藏为“hideEle”，但在特定元素单击时，我将具有动画状态的特定元素显示为“showEle”。

这可以按预期工作，但是在使用向上/向下箭头向上或向下移动元素时， hideEle=>showEle 动画正在以角度应用。

我还使用 trackBy 为每个角度元素提供了唯一的 id，但问题仍然存在。

trigger('toggleState', [
      state("showEle" , style({ background: "#f1f2f6" })),
      state("hideEle" style({ height: '0', padding: 0, display: 'none' })),
      // transition
      transition('showEle => hideEle', animate('500ms ease-in')),
      transition('hideEle => showEle', animate('500ms ease-out')),
    ]);

最初该元素是隐藏的

显示：“无”

非常感谢任何帮助。

标签： angularanimation

解决方案

添加了 void 状态和转换 (hideEle=>void) 以删除不需要的动画。

state("void", style({height: 0, display: "none"})),
transition("hideEle <=> void", animate("500ms ease-in"))

推荐阅读