角度动画应用于元素重新排列答案

【问题标题】：Angular animation getting applied on element rearrangement角度动画应用于元素重新排列
【发布时间】：2019-07-04 19:27:02
【问题描述】：

在 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')),
    ]);

最初用

隐藏元素

显示：“无”

非常感谢任何帮助。

【问题讨论】：

在“Stackblitz”上创建示例演示
你能展示一下模板吗？

标签： angular animation

【解决方案1】：

添加了一个 void 状态和转换 (hideEle=>void) 来移除不需要的动画。

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

【讨论】：