Угловая анимация при изменении свойства

Question

У меня есть настраиваемая навигационная панель для списка предметов.Панель содержит один связанный с данными компонент, окруженный двумя кнопками для перехода к предыдущим и следующим данным.Компонент привязки данных отображает текущие активные данные.Теперь я хочу показать анимацию при изменении объекта данных.Я новичок в угловой анимации и мне трудно найти пример, который подходит для моего сценария.Как запустить анимацию при изменении значения свойства @Input ()?

Answer 1

Если вы не говорите об анимации маршрутизатора, я думаю, вам придется поддерживать состояние анимации, используя установщик @Input() и функцию анимации done.Пример здесь https://stackblitz.com/edit/angular-lmmixg

Дочерний компонент ts:

  @Input() set data(data: any) {
    this.dataState = 'entering';
    this._data = data;
  }

  get data() { return this._data };

  _data: any;

  dataState: 'entering' | 'done' = 'done';

Дочерний компонент html:

<div [@dataChange]="dataState" (@dataChange.done)="dataState = 'done'">{{ data }}</div>

Анимация ts:

export const dataChange: AnimationTriggerMetadata = trigger('dataChange', [
    transition('done => entering', [
        style({
            'margin-left': '90%'
        }),
        animate('200ms ease',
            style({ 'margin-left': '*' }))
    ]),
]);

Answer 2

ОТВЕТ на ваш вопрос

Как вызвать анимацию при изменении значения свойства @Input ()?

У дочернего объекта может быть свойство inputкомпонент как

Input() FadeDirection: string = "FadeFromRight";

и использовать это свойство ввода в качестве состояния, чтобы присвоить animation trigger как

[@animatecomponent]="FadeDirection"

, а для набора дискретных состояний определить эффекты перехода как

transition('void => FadeFromRight', [ ... ])

Образец создан на https://stackblitz.com/edit/angular-routes-animations