Угловая анимация не оживляет новый компонент

Question

Я пытаюсь анимировать создание / удаление нового углового компонента в моем приложении.

Я следую за Angular guide здесь: https://angular.io/guide/transition-and-triggers#enter-and-leave-aliases

В частности, я пытаюсь анимировать непрозрачность (например, эффект fadeIn). Я заметил, что анимация, кажется, работает нормально на обычных HTML-элементах (div и т. Д.), Но при применении к угловому компоненту - нет. Я создал следующий Stackblitz, чтобы продемонстрировать проблему:

https://stackblitz.com/edit/angular-9tvz1b

Я ожидал бы, что оба блока будут анимироваться одинаково, однако только первый из них. Я заметил, что применение непрозрачности 0.5 к элементу непосредственно в Devtools также не имеет никакого эффекта. Так это всего лишь ограничение HTML? Я не смог найти прямых ответов на этот вопрос.

Каким было бы альтернативное решение для анимации моего компонента без необходимости запрашивать само представление и анимацию его первого дочернего элемента?

Answer 1

как у вас дела?

Для анимации компонентов вы должны использовать метаданные animations, как вы это делали в AppComponent . Способ уже реализован Angular для этого, я думаю, он дает вам больше гибкости для стиля компонентов.

Обычно у вас не будет только div в Компоненте, и, возможно, вы бынравится оживлять их по отдельности и по отдельности. Кроме того, вы можете использовать анимацию маршрутизации, поэтому лучше использовать тег метаданных animations.

Если вы просто хотите повторно использовать анимацию в различных компонентах, это на самом деле вполне нормально и довольно просто. Вы можете поделиться своими действиями триггера через общее свойство.

Я разветвил ваш Stackblitz, показывая его: https://stackblitz.com/edit/angular-swvfdy

Cheers !!