对数组长度变化应用动画

Question

每次数组大小改变时如何应用动画？

我试过这样做，但是不行。

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

动画基本上是在 :enter 时将 maxHeight 从 0 更改为 100vh，在 :leave 时将 maxHeight 从 100vh 更改为 0，当 ngIf 在 true 和 false 之间切换时它起作用，但是当更改数组长度时，动画不会执行.

有人有这个动画的例子要分享吗？

Answer 1

这是一个例子：

@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);
  }
}

工作示例：https://stackblitz.com/edit/angular-animation-when-removing-jfle8g?file=src%2Fapp%2Fapp.component.ts

对数组长度变化应用动画

Apply animations on array length change

angular

animation

angular-animations