Как я могу переключить размер шрифта на клик JavaScript / Angular

Question

Там 4 шага:

1.) Нажмите на категорию

2.) Показать отфильтрованные продукты

3.) Выберите отфильтрованные продукты

4.) Отображение выбранных продуктов в самой правой части экрана / 3-й дочерний компонент /

Чего я хотел бы добиться, так это:

Когда я нажимаю на товар (3-й шаг), товар добавляется к «правильному» компоненту, и там я хотел бы изменить размер шрифта, чтобы он выглядел как анимация, например, увеличить шрифт, например, 28, и сделать опять маленький, например 18.

Продукты добавляются в 3-й компонент с помощью службы, которая совместно используется дочерними компонентами. Вот как это выглядит:

Спасибо, ребята Приветствия

Answer 1

Прежде всего, добавьте новое правило в класс order-quantity-number:

transition: font-size 1s;

затем определите другой селектор в css:

.order-quantity-number.selected {
   font-size: 48px;
}

тогда вам просто нужно добавить этот «выбранный» класс в элемент span, и размер шрифта будет анимирован. Через 1 с (анимация завершена) вам нужно удалить класс из элемента, и текст будет уменьшен. Я надеюсь, что это отвечает на вопрос:)

РЕДАКТИРОВАТЬ: детали реализации

Шаблон:

Добавить ссылку на элемент span, чтобы он был доступен из кода

<span class="order-quantity-number" #ref>{{receiptItem.quantity}}</span>

ц

Добавьте следующую строку в класс, чтобы использовать 'ref' из шаблона.

@ViewChild('ref') elRef: ElementRef;

Добавить setTimeout() вызов обработчика щелчка, который запускает анимацию для удаления selected класса через 1 с:

onClick() {
    ...
    // 1. add 'selected' class to the span element
    this.elRef.nativeElement.classList.add('selected');

    // 2. remove it after 1s
    setTimeout(() => {
      this.elRef.nativeElement.classList.remove('selected');
    }, 1000);
}

Answer 2

Вы можете написать простой @Directive, который реализует интерфейс AfterViewInit, в который вы добавите класс с большим font-size, а затем проследите за событием transitionend и удалите класс.

как то так

@Directive({
    selector: `[fontAnimation]`
})
export class FontAnimationDirective implements AfterViewInit {
    constructor(
        private hostElement: ElementRef
    ) { }

    ngAfterViewInit() {
        const el = this.hostElement.nativeElement as HTMLElement;
        el.classList.add('animate-font-size');
        el.addEventListener('animationend', (ev: TransitionEvent) => {
            if (ev.propertyName == 'font-size') {
                el.classList.remove('animation-font-size');
            }
        })
    }
}

Предупреждение: transitionend будет вызывать событие для каждого свойства, которое имеет переход, поэтому нам нужно проверить, равен ли propertyName font-size.

Все, что вам нужно сделать, это создать правильный класс css. Не забудьте импортировать его на правильный NgModule