Apply animations on array length change-CodePudding

How do i apply an animation every time the array size changes?

I tried to do it this way, but it's not working.

<div ngIf="condition" [@heightAnimation]="myList.length"></div>

The animation is basically changing the maxHeight from 0 to 100vh on :enter and from 100vh to 0 on :leave and it works when ngIf switches between true and false, but when changing the array length, the animation is not executed.

Does anyone have an example of this animation to share?

CodePudding user response：

Here's an example:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('simpleFadeAnimation', [
      state('in', style({ opacity: 1, height: 100   'vh' })),
      transition(':enter', [
        style({ opacity: 0, height: 0   'vh' }),
        animate(200),
      ]),
      transition(
        ':leave',
        animate(400, style({ opacity: 0, height: 0   'vh' }))
      ),
    ]),
  ],
})
export class AppComponent {
  name = 'Angular';
  data = ['A', 'B', 'C'];

  add() {
    const random = Math.floor(Math.random() * 10);
    this.data.push(random.toString());
  }

  remove() {
    this.data.pop();
  }

  removeThis(index) {
    this.data.splice(index, 1);
  }
}

Working example: https://stackblitz.com/edit/angular-animation-when-removing-jfle8g?file=src/app/app.component.ts