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

百变鹏仔 3个月前 (10-13) #JavaScript

文章标签动画

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

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

创建列表

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

@component({  selector: 'app-root',  standalone: true,  template: `    <button>add user</button>

`,})export class appcomponent { users = signal([ { id: math.random(), name: 'michele' } ]); adduser() { this.users.update(users => [...users, { id: math.random(), name: 'new user' }]); }}

请注意，我们添加了一个将用户添加到列表中的按钮！

动画列表

现在，如果我们想要为要添加的新用户设置动画该怎么办？首先，我们想通过在主配置中提供它来告诉 angular 我们想要使用它的动画系统：

import { provideanimationsasync } from '@angular/platform-browser/animations/async';bootstrapapplication(appcomponent, {  providers: [    provideanimationsasync(),  ]});

然后，我们可以创建我们的动画：

import { trigger, transition, style, animate } from '@angular/animations';const fadeinanimation = trigger('fadein', [  transition(':enter', [    style({ transform: 'scale(0.5)', opacity: 0 }),    animate(      '.3s cubic-bezier(.8, -0.6, 0.2, 1.5)',       style({ transform: 'scale(1)', opacity: 1 })    )  ])])

有了这些帮助者，我们：

文章推荐

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

创建列表

动画列表

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？