Как анимировать элементы при вставке массива Angular? - PullRequest
Новая
       27

Как анимировать элементы при вставке массива Angular?

1 голос
/ 30 апреля 2020

Я настоящий новичок ie в angular анимациях, до сих пор никогда не приходилось использовать ничего, кроме простых переходов. Я думаю, что я ищу очень просто, но я не могу понять, чего мне не хватает.

У меня есть массив, отображаемый в шаблоне с помощью ngFor. Я могу вставить или удалить элементы этого массива простым нажатием кнопки. Прямо сейчас у меня есть простая анимация, взятая из Angular do c для изменения непрозрачности вставленного или удаленного элемента: 

trigger(
      'inOutAnimation', 
      [
        transition(
          ':enter', 
          [
            style({ opacity: 0 }),
            animate('1s ease-out', style({ opacity: 1 }))
          ]
        ),
        transition(
          ':leave', 
          [
            style({ opacity: 1 }),
            animate('1s ease-in', style({ opacity: 0 }))
          ]
        )
      ]
    )

Теперь мне нужно создать анимацию, чтобы переместить окружающие элементы в их новая позиция на странице. Я не хочу, чтобы существующие элементы просто появлялись на своих новых позициях. Как я могу это сделать ? Потому что, похоже, триггер inOutAnimation предназначен только для добавленного или удаленного элемента. Как управлять переходами других элементов массива? Также я всегда использовал подвижные переходы на элементах с известными начальной и конечной позициями. Теперь с массивом позиции элементов являются динамическими c.

Ваша помощь будет с благодарностью оценена

РЕДАКТИРОВАТЬ:

https://stackblitz.com/edit/angular-szt5hm

В этом примере мне хотелось бы, чтобы, нажимая кнопку «Добавить», div 3 скользил / перемещался в положение 4 вместо просто всплывающего окна. то же самое для 4 до 5 и т. д. c.

1 Ответ

0 голосов
/ 30 апреля 2020

Вы можете использовать keyframes для определения анимации, аналогичной CSS. Попробуйте следующее

Контроллер 

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger("inOutAnimation", [
      state("in", style({ opacity: 1 })),
      transition(":enter", [
        animate(
          300,
          keyframes([
            style({ opacity: 0, offset: 0 }),
            style({ opacity: 0.25, offset: 0.25 }),
            style({ opacity: 0.5, offset: 0.5 }),
            style({ opacity: 0.75, offset: 0.75 }),
            style({ opacity: 1, offset: 1 }),
          ])
        )
      ]),
      transition(":leave", [
        animate(
          300,
          keyframes([
            style({ opacity: 1, offset: 0 }),
            style({ opacity: 0.75, offset: 0.25 }),
            style({ opacity: 0.5, offset: 0.5 }),
            style({ opacity: 0.25, offset: 0.75 }),
            style({ opacity: 0, offset: 1 }),
          ])
        )
      ])
    ])
  ]
})
export class AppComponent  {
  elements = [
    { value: 1, background: 'green' },
    { value: 2, background: 'red' },
    { value: 3, background: 'blue' },
    { value: 4, background: 'yellow' },
    { value: 5, background: 'pink' }
  ]

  add() {
    this.elements.splice(2, 0, { value: 6, background: 'violet' });
  }

  remove() {
    this.elements.splice(2, 1);
  }
}

Шаблон 

<div class="container">
    <div [@inOutAnimation]="'in'" *ngFor="let element of elements" [ngStyle]="{ 'background-color': element.background }">
        {{ element.value }}
    </div>
</div>
<button (click)="add()">Add</button>
<button (click)="remove()">Remove</button>

Анимация должна быть привязана к элементу с *ngFor, чтобы использовать :enter и :leave.

Я изменил ваш Stackblitz .

...