Применяется угловая анимация при перестановке элементов

Question

В ngFor я использую угловое свойство «trigger» для имитации поведения аккордеона в angular.

Изначально я скрываю все элементы списка с анимированным состоянием как «hideEle», но при щелчке по конкретному элементу,Я показываю этот конкретный элемент с анимированным состоянием как «showEle».

Это работает, как и ожидалось, но при перемещении элементов вверх или вниз с помощью стрелок вверх / вниз анимация hideEle => showEle применяется в угловом направлении.

Я также использовал trackBy для предоставления уникального идентификатора каждому угловому элементу, но проблема остается той же.

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

Первоначально элемент скрыт с помощью

display: "none"

Любая помощь действительно приветствуется.

Answer 1

Добавлено состояние void и переход (hideEle => void) для удаления нежелательной анимации.

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