Анимация динамических компонентов в Angular

Анимация динамических компонентов в Angular

От автора: в этой статье мы рассмотрим два разных метода, с помощью которых реализуется в Angular анимация динамических компонентов.

В первом примере мы используем чистую анимацию CSS. Давайте создадим для демонстрации кнопку добавления.

Начнем с компонента.

Реализация компонента проста. Мы ожидаем получить контент в качестве ввода и отобразить его в контейнере. Давайте добавим некоторые стили.

Теперь мы можем продолжить создавать функциональные возможности, которые будут динамически генерировать компонент snack-bar и добавлять его в body.

Метод resolveComponentFactory() принимает компонент и возвращает ComponentFactory. Вы можете представить ComponentFactory, как о объект, который знает, как создать компонент. Когда мы получили Factory, мы можем использовать метод create() для создания экземпляра componentRef, передающего текущий инжектор.

КомпонентRef предоставляет ссылку на собственный элемент DOM, который мы затем добавляем в body. На этом этапе мы можем вызвать метод open(). Результат — мы получим рабочий snack-bar с анимацией.

Теперь давайте перейдем к закрытию snack-bar. Во-первых, нам нужно добавить анимацию закрытия.

Мы прослушаем событие клика закрытия и применяем к элементу snack-bar анимацию закрытия.

На этом этапе мы увидим анимацию закрытия, но компонент все равно будет виден. Ключевым моментом здесь является ожидание окончания анимации, а затем вызов метода componentRef.destroy() и удаление элемента DOM из body.

Для этого мы можем использовать событие браузера animationend — событие animationend происходит, когда анимация CSS завершена.

Одним из свойств события animationend является имя текущей анимации. Мы можем проверить, является ли текущая анимация анимацией snackbarOut. Если это так, мы можем запустить событие afterClose.

Теперь, в методе open() мы можем подписаться на событие afterClose и удалить компонент, но только после окончания анимации.

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

ngOnInit() {
const animate = value => this.renderer.setStyle(this.element, ‘animation’, value);

if (this.dismissible) {
animate(snackbarIn 0.5s);
} else {
animate(snackbarIn 0.5s, snackbarOut 0.5s ${this.duration}ms);
}
}

Наш второй пример использует ту же технику, но на этот раз с помощью анимации Angular. Я не буду подробно его описывать, потому что это в основном тот же поток, что и в первом примере.

Речь идет только об изменении состояния анимации в соответствии со статусом компонента, прослушивании события анимации и удалении компонента. Вот полностью рабочий пример:

Автор: Netanel Basal

Источник: //netbasal.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: