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

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

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

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

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

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

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

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

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

На этом этапе мы увидим анимацию закрытия, но компонент все равно будет виден. Ключевым моментом здесь является ожидание окончания анимации, а затем вызов метода 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

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree