Angular 4 Animate the newly added element of an array

Question

I have a div where I have some values in an array displayed in it and I can add more. The newly added value will be added directly to the div:

list = ['milk', 'sugar', 'flour'];
    
state = 'normal';

//@ViewChild('f') addForm: NgForm;

onAdd(item)
  {
    this.list.push(item);
    //this.addForm.reset();
  }

I have this simple animation:

animations: [
    trigger('divState', [
        state('normal', style({
            backgroundColor: 'red',
            transform: 'translateX(0)'
        })),
        state('highlighted', style({
            backgroundColor: 'blue',
            transform: 'translateX(100px)'
        })),
        transition('normal=>highlighted', animate(300)),
        transition('highlighted=>normal', animate(800))
    ])
  ]

That is applied to a div, where it will be animate it.

What I really need is to apply a flashing red color, to the newly added value of the array for few milliseconds like flash.

So if I have the following:

Milk

Sugar

Flour

And then added Eggs:

Milk

Sugar

Flour

Eggs

And the Eggs div should flash.

I know that I should work on the index, by getting the last added index and apply the animation on it:

<li 
  class="list-group-item"
  
  *ngFor="let item of list; let i = index" >
  {{ item }}
</li>

I tried the following:

<li [@divState]="state"
  class="list-group-item"
  
  *ngFor="let item of list; let i = index" >
  {{ item }}
</li>

So all the divs are highlighted.

How can apply this animation (basically I am not focusing on the animation as itself so I will apply a simple red color to it) using the index so by that, I can show the newly added element of the array.

You can certainly write your own answer and accept it if it's complete. — Augie Gardner, Dec 07 '17 at 18:20
Yes. The newely added element will be animated automatically. — alim1990, May 06 '18 at 02:16

score 0 · Answer 1 · answered Dec 11 '22 at 15:50

I get the animation from Angular 2 animate *ngFor list item one after other using new Animation support in RC 5.

The solution is that the animation could be applied normally to any element of ngFor by simply adding the property of the trigger as adding it into another element.

So here are the scripts:

animations: [
    trigger('divState', [
      state('in', style({backgroundColor: 'red',transform: 'translateX(0)'})),

      transition('void => *', [
        animate(1000, keyframes([
          style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
          style({backgroundColor: '#bee0ff',opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),
          style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})
        ]))
      ]),
      transition('* => void', [
        animate(300, keyframes([
          style({opacity: 1, transform: 'translateX(0)',     offset: 0}),
          style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
          style({opacity: 0, transform: 'translateX(100%)',  offset: 1.0})
        ]))
      ])
    ])
  ]

And here is the array displayed:

<li  [@divState]="state"
   class="list-group-item"
   (click)="onDelete(item)"
   *ngFor="let item of list; let i = index" >
   {{ item }}
</li>

Here is a plunker.

_{This answer was posted as an edit to the question Angular 4 Animate the newly added element of an array by the OP alim1990 under CC BY-SA 3.0.}

Angular 4 Animate the newly added element of an array

1 Answers1