Angular 7 / CSS анимация: расширение поля формы в фокусе на указанное количество? - PullRequest
Новая
       46

Angular 7 / CSS анимация: расширение поля формы в фокусе на указанное количество?

0 голосов
/ 02 апреля 2019

Я создал анимацию ключевых кадров CSS для поля формы, чтобы расширить фокус с помощью scaleX. 


@keyframes formField {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scaleX(1.03);
  }

  80% {
    transform: scaleX(.98);
  }

  100% {
    transform: scaleX(1);
  }
}

Но недостаток в том, что поля формы имеют разную ширину, они расширяются в разной степени. Мой клиент хотел бы, чтобы все поля формы расширялись на одну и ту же величину (например, 10 пикселей) независимо от их ширины. Поэтому я не могу использовать масштабирование по коэффициенту (например, scaleX(1.03)).

Итак, я не думаю, что смогу использовать для этого CSS-преобразования.

Затем я подумал, что мог бы создать директиву Angular, которая получает ширину пикселя объекта, к которому он применяется, увеличивать ширину на 10 пикселей и возвращать ее к первоначальной ширине с переходами.

Редактировать

Итак, я создал эту директиву: 

import { ElementRef, HostListener, Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  /* tslint:disable-next-line:component-selector */
  selector: '[focusField]',
  animations: [
    trigger('isFocused', [
      transition('*<=> *', [
        style({ transform: 'scaleX(1)' }),
        animate(200, style({ transform: `scaleX(${this.scaleFactor})` }))
      ])
    ])
  ],
  template: `
    <ng-content></ng-content>
  `
})
/* tslint:disable-next-line:component-class-suffix */
export class FocusFieldDirective {
  constructor(private _elementRef: ElementRef) {}

  fieldWidth: number;
  scaleFactor: number;

  @HostListener('focus', ['$event'])
  onFocusField(event: MouseEvent): void {
    this.fieldWidth = this._elementRef.nativeElement.offsetWidth;
    this.scaleFactor = this.fieldWidth + 10 / this.fieldWidth;
  }
}

При фокусировке на поле ввода с примененной директивой я правильно получаю ширину элемента и масштабный коэффициент. Тем не менее, я получаю сообщение об ошибке при попытке использовать scaleFactor в анимации со следующей строкой: 

animate(200, style({ transform: `scaleX(${this.scaleFactor})` }))

выдана ошибка: TypeError: undefined is not an object (evaluating 'this.scaleFactor')

...