Анимация скольжения вверх / вниз с эффектом исчезновения / выхода

Question

Я реализовал анимацию с использованием угловой анимации 6, анимация имеет тип Слайд вверх / вниз вместе с эффектом затухание , но меня беспокоит то, что она ведет себя не так, как задумано.

Вот песочница для того же. https://codesandbox.io/s/angular-vmw5t

Вот как это выглядит сейчас.

Меня беспокоит то, что :enter анимация работает нормально, так как элемент появляется снизу, как только начинается анимация, но как только я нажимаю на крестик в вверху справа кнопки, затем элемент идет немного вверх, а затем исчезает в основании .

Ожидаемое поведение должно быть, как только кросс-иконка нажата кнопка из ее текущей позиции должна опуститься и исчезнуть, я хочу устранить это небольшое движение вверх кнопки, как только я нажму cross-icon, вместо этого он должен постепенно исчезнуть из своего текущего положения.

Резюме: Анимация затухания / скольжения не работает должным образом, как только пользователь нажимает кнопку cross-icon *, слегка поднимается, затем опускается и затем затухает, вместо этого он должен опуститься из своего текущего положения.

Answer 1

Анимация типа

  animations: [
    trigger('flyInOut', [
      state('in', style({ opacity:1,transform: 'translateY(0)' })),
      transition('void => *', [
        style({ opacity:0,transform: 'translateY(100%)' }),
        animate(200)
      ]),
      transition('* => void', [
        animate(200, style({ opacity:0,transform: 'translateY(100%)' }))
      ])
    ])
  ]

должна выполнять работу в формате .html, например

  <button (click)="toogle=!toogle">click</button>
  <div [@flyInOut] *ngIf="toogle" >
    hello word <button (click)="toogle=false">x</button>
  </div>

См. stackblitz