переход перехода не работает, когда ngIf находится на родительском компоненте

Question

У меня есть очень простой компонент с анимацией постепенного появления / исчезновения:

@Component({
  selector: 'app-tooltip',
  templateUrl: './tooltip.component.html',
  styleUrls: ['./tooltip.component.css'],
  animations: [
    trigger('fade', [
      state('void', 
        style({
          opacity: 0
        })
      ),
       transition(':enter, :leave',[
          animate(2000)
        ])
    ])
  ]
})
export class TooltipComponent {
  constructor() { }
}

Вот соответствующий шаблон:

<div @fade>
  This is my tooltip
</div>

Вот как компонент вызывается:

<button (click)="show = !show">Show Tooltip</button>
<app-tooltip *ngIf="show"></app-tooltip>

входящая анимация работает очень хорошо, а уходящая - нет. Если я добавлю ngIf в компонент подсказки, обе анимации будут работать, но это не желаемое решение. Действительно, мой компонент всплывающей подсказки - это компонент, который уже существует в собственной библиотеке, которая уже используется во многих проектах в моей компании. Я не хочу изменять клиентский проект всей библиотеки (кроме версии библиотеки). Моя цель - легко добавить анимацию во все всплывающие подсказки.

Вот моя проблема со стекабликом: https://stackblitz.com/edit/angular-wanrsx

Может кто-нибудь объяснить мне, почему моя уходящая анимация не дает работать пожалуйста? Как я могу заставить обе анимации работать без перемещения моей директивы ngif?

Answer 1

Интересно, что причина, по которой ваша затухающая анимация не работает, заключается в том, что анимация находится внутри <app-tooltip></app-tooltip>. Когда кнопка нажата, *ngIf скрывает всплывающую подсказку, игнорируя анимацию, которая происходит внутри <app-tooltip></app-tooltip>.

Однако простое перемещение анимации за пределы показывает странное поведение: https://stackblitz.com/edit/angular-kaqbg4

Подсказка отображается сразу, а при повторном нажатии подсказка исчезает через 2 секунды без анимации затухания.

Я не могу этого объяснить, но Я предполагаю, что это связано с тем, как angular обрабатывает компоненты в отличие от других элементов при удалении их из представления.

Чтобы исправить это, мы можем просто переместить анимацию в div-обертку: https://stackblitz.com/edit/angular-qqnxzn