Angular 9 - анимация и условие * ngIf - PullRequest
Новая
       31

Angular 9 - анимация и условие * ngIf

0 голосов
/ 28 апреля 2020

Я пытаюсь понять анимацию в angular, но сейчас мне очень тяжело с этим. Любые источники обучения будут оценены, кроме этого конкретного примера.

Вот stackblitz .

Моя цель состоит в том, чтобы анимировать компонент каждый раз, когда он создается и уничтожается с помощью условия *ngIf.

Текущие проблемы:

  • , когда анимация применяется к родительской анимации, работает только при первой загрузке (это единственный раз, когда она работает)
  • Анимация, которая применяется к дочерним элементам, вызывает странный сбой: она клонирует компонент на некоторое время (очевидно, меньше, чем я где-либо вводила) вместо того, чтобы уничтожать текущий компонент и воссоздавать его через 1 секунду

Надеюсь, на это не так уж сложно смотреть. Я создал 4 примера, чтобы понять в чем разница между использованием :enter + :leave и void => * + * => void и , к которым они действительно применимы: дочерний элемент или элемент сам по себе?

Ответы на пораженные вопросы.

1 Ответ

2 голосов
/ 28 апреля 2020

Анимации всегда применяются к элементу, с которым они связаны. 

<div @comeOrGo>
    <hello *ngIf="show11" [name]="'Animation (1.1 on parent)'"></hello>
</div>

Причина, по которой это работает изначально, заключается в том, что div создается и анимируется в виде angular.

Однако, когда вы переключаете его с помощью кнопки, из DOM удаляется только компонент hello, а не div (с которым связана анимация).

Чтобы исправить, мы можем сделать this: 

  <div @comeOrGo *ngIf="show11">
        <hello [name]="'Animation (1.1 on parent)'"></hello>
    </div>

Это удаляет div из DOM (а также hello) и, следовательно, запускает анимацию.

Что касается сбоя дублирования при быстром переключении кнопок:

Проблема в том, что когда Angular удаляет элемент из DOM и этот элемент имеет анимацию, он всегда будет воспроизводить эту анимацию, даже если впоследствии он снова создаст компонент.

Я не знаю лучшего решения для него, но если пользователю разрешено быстро нажимать кнопку переключения, вам все равно не следует использовать :leave анимацию.

...