Javascript 角度动画：仅为ngFor列表中添加的项目设置动画

我有一个

ngFor

中的数组项列表。我有一个简单的按钮，可以向数组中添加一个an项。我只想在添加项时将动画应用于这些项，但尽管这样做有效，但页面上已经存在的列表项组在页面加载时会获得动画。如何将动画仅限于新添加的项目？这是角度10

我发了一封信

添加项


{{item}

这是stackbliz的解决方案链接，我刚刚使用了角度动画的禁用属性。如果标志变量为true，则动画将被禁用，如果为false，则动画将被启用，这是我们在page init之后执行的操作，在page init中加载了所有内容，因此动画的触发器将仅在推送操作中起作用

编辑：为避免控制台错误

expressionChangedTerithasBeenCheckedError

请在添加项上启用动画，如下所示。甚至stackbliz代码也进行了相应的更新，以供参考

    addItem() {
        if (this.flag) {
          // Enabling Animation
          this.flag = !this.flag;
        }
        this.items.push("another item");
      }

应用程序组件.ts

    import { Component } from "@angular/core";
    import {
      animate,
      animateChild,
      group,
      query,
      style,
      transition,
      trigger,
      state
    } from "@angular/animations";
    
    @Component({
      selector: "my-app",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"],
      animations: [
        trigger("myTrigger", [
          state(
            "fadeInFlash",
            style({
              opacity: "1"
            })
          ),
          transition("void => *", [
            style({ opacity: "0", transform: "translateY(20px)" }),
            animate("500ms")
          ])
        ])
      ]
    })
    export class AppComponent {
      flag: boolean = true;
      items = ["item 1", "item 2", "item 3"];
      state: string = "fadeInFlash";
    
      addItem() {
        if (this.flag) {
          this.flag = !this.flag;
        }
        this.items.push("another item");
      }
    }

app.component.html

开始编辑以查看发生的奇迹：）


添加项



{{item}}

谢谢。但存在控制台错误：

error:expressionChangedTerithasBeenCheckedError:Expression在检查后已更改。“@.disabled”的上一个值：“true”。当前值：“false”。

非常欢迎。请检查通过不使用生命周期挂钩解决控制台错误问题的更新答案。关于错误的原因，您可以从中获得参考

    addItem() {
        if (this.flag) {
          // Enabling Animation
          this.flag = !this.flag;
        }
        this.items.push("another item");
      }

    import { Component } from "@angular/core";
    import {
      animate,
      animateChild,
      group,
      query,
      style,
      transition,
      trigger,
      state
    } from "@angular/animations";
    
    @Component({
      selector: "my-app",
      templateUrl: "./app.component.html",
      styleUrls: ["./app.component.css"],
      animations: [
        trigger("myTrigger", [
          state(
            "fadeInFlash",
            style({
              opacity: "1"
            })
          ),
          transition("void => *", [
            style({ opacity: "0", transform: "translateY(20px)" }),
            animate("500ms")
          ])
        ])
      ]
    })
    export class AppComponent {
      flag: boolean = true;
      items = ["item 1", "item 2", "item 3"];
      state: string = "fadeInFlash";
    
      addItem() {
        if (this.flag) {
          this.flag = !this.flag;
        }
        this.items.push("another item");
      }
    }