Блог

Я хотел бы анимировать вставку / удаление элемента DOM, который запускается родительским элементом выше в моем дереве компонентов, следующим образом:

 <component-A>
  <component-B *ngIf="condition">
    <component-C>
      <div @fadeEnterLeave>animated element</div>
    </component-C>
  </component-B>
</component-A>
  

(Обратите внимание, что компоненты не являются «включенными» (без использования проекции содержимого ng-content ); они просто прямые и единственные дочерние элементы в соответствующем шаблоне их родителя (минимальное воспроизведение, чтобы лучше проиллюстрировать мою проблему: здесь ))

Как есть, анимируется только :enter переход, поскольку component-A поддерево ‘s мгновенно исчезает, когда condition не выполняется, предотвращая :leave воспроизведение анимации.

Теперь в документе angular указано, что:

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

Поэтому мне нужно «свести» анимацию к component-C использованию animateChild функции:

 trigger("cascade", [
  transition(":enter, :leave", [query("@*", animateChild())])
])
  

component-B шаблон:

 <component-C @cascade></component-C>
  

Добавление этого триггера в component-B (который применяет триггер к component-C элементу в его шаблоне) дает мой ожидаемый результат: :enter и :leave анимация воспроизводится для component-C div.

Загвоздка в том, что в моем случае component-A также зарегистрированы анимации для использования элементов его шаблона, и по какой-то причине повторное @cascade использование триггера (даже только этого; никаких других анимаций) пропускает component-C анимацию div: @fadeInOut триггер вызывается для обоих состояний, но анимация «выполнена» как только он запустится.

Опять же, я, возможно, не совсем понимаю, но демонстрация есть. Откройте консоль, чтобы просмотреть журналы таймингов и порядка каждого запуска триггеров «start» и «done». Спойлер: события триггера не «всплывают вверх / вниз» в древовидном порядке.

Я, конечно, упускаю что-то глупое, потому что, должно быть, это такое обычное явление, когда нужно анимировать элемент:enter /:leave вдали от родительского [ngFor] или [ngIf] ?

Спасибо за ваш вклад!