Angular LAB：动画列表并使用 AnimationBuilder 实现命令式动画

发布日期： 2024-10-11 阅读量： 作者： 网络

angular lab：动画列表并使用 animationbuilder 实现命令式动画

您知道 angular 包含一个复杂的动画系统吗？当我想要在元素进入屏幕或被破坏时为其设置动画时，我发现它特别有用！

此外，您还可以使用 animationbuilder 来强制播放、暂停或停止一些自定义动画！让我们看看它是如何完成的。

创建列表

在本练习中，我们首先创建一个列表，如下所示：

@component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)="adduser()">add user</button>
    <ul>
    @for (user of users(); track user.id) {
      <li>{{ user.name }}</li>
    }
    </ul>
  `,
})
export class appcomponent {
  users = signal<user[]>([
    { id: math.random(), name: 'michele' }
  ]);

  adduser() {
    this.users.update(users => [...users, { id: math.random(), name: 'new user' }]);
  }
}

# bootstrap

上一篇: 小程序开发之page（）函数

Angular LAB：动画列表并使用 AnimationBuilder 实现命令式动画

随便看看